The fastest way to set the focus on a textfield - javascript

what is the fastest (the really fastest) way to set the focus on a textfield?
My page looks like
<html>
<head> ... </head>
<body>
... content ...
<input type="text" id="ct_one" name="ct_pet[]" value="" />
... content ...
<script> ... load jquery and jquery_ui ... </script>
</body>
</html>
Thanks in advance!
Peter

You can put a script right after the element, that sets focus to it. That would set focus at the earliest possible moment, i.e. right after the element is created.
<input type="text" id="ct_one" name="ct_pet[]" value="" />
<script type="text/javascript">
document.getElementById('ct_one').focus();
</script>

Assign value 0 to attribute tabindex for your input field.
http://www.w3.org/TR/html4/interact/forms.html#adef-tabindex

the accepted answer here seems to be "the really fastest" :)
Set input field focus on start typing
JSFiddle example

Related

Input text box focus on blur event

Actually I'm trying to set focus on text-box when focus is lost.The reason behind this is that there is requirement to forcefully set focus on text-box if some validation fails(like empty field validation) and validation is perform on blur event of that text box.
I have tried it on fiddle also but it seems like focus is there but cursor is not blinking.
Please refer link : http://jsfiddle.net/zHeJY/
Please let me know the reason behind this and solution for same.
Thanks in advance.
First: This is a bad idea to trap user inside an input unless validation passes! Users should be allowed to focus whatever they want. Ideally, you can prevent a form submission if validation fails.
Problem: (1) You don't have any other element in the fiddle you provided. (2) You are not validating anything, just doing an endless loop for blur-focus cycle!
Solution:
See this fiddle: http://jsfiddle.net/zHeJY/7/
With a proper validation routine in place (and another element available), it will work.
HTML:
<input id="setFocus"/>
<input id="other" />
JS:
$("#setFocus").on("blur", function(e) {
if (! validate(this)) {
$(this).focus();
}
});
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
$( document ).ready(function() {
$(document).on('blur', "#setFocus", function (e) {
$(this).focus();
});
});
</script>
</head>
<body>
<input type="text" id="setFocus"/>
<input type="text" id="set"/>
</body>
</html>
try this
HTML
<div id="something">
<input type="text" id="setFocus"/>
<input type="text" id="setFocus1"/>
</div>
JS
$("#something").mouseup("blur",function(){
$(this).children(":first").focus();
})
you should have parent element for this on click of any where you will get the required result

Format a text in the textbox

I am trying to format a selected text to bold inside a textbox but not happening. However, it is hapenning in a span/div. My code
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function FormatSelectedWord(txtBox,style)
{
var selectedText = document.selection
? document.selection.createRange().text
: txtBox.value.substring(txtBox.selectionStart,txtBox.selectionEnd);
if(selectedText!='')
{
var newText='<'+style+'>'+selectedText+'</'+style+'>';
txtBox.value=txtBox.value.replace(selectedText,newText)
spOutput.innerHTML=txtBox.value;
}
}
</script>
</head>
<body>
<input type="text" name="txtBox"> </input>
<input type="button" value="Bold" onclick="FormatSelectedWord(txtBox,'b')">
<span id="spOutput"></span>
</body>
</html>
Is it possible to do it insde a textbox. If so how?
Thanks
No, it's not possible to style the text in a text box. You can make your div or span contentEditable=true if you need formatted text that is editable.
Rather than re-invent the wheel, you're better off looking at implementing TinyMCE or some other, similar thing that does this - it's quite easy. It's very commonly sought after functionality, and it's called a "Rich text editor", for if you want to go Googling :)
Trying to add this kind of functionality yourself is a huge can of worms, and you really don't want to get involved :)
Here is an example of what I think you want: http://jsfiddle.net/6gQJC/1/
and here's what you asked: http://jsfiddle.net/6gQJC/
txtBox is undefined
So this:
<input type="text" name="txtBox"> </input>
needs to be
<input type="text" id="txtBox" name="txtBox"> </input>
and then
function FormatSelectedWord(txtBox,style)
{
var textbox = document.getElementById('textBox');

Text input focus loss event

I have the following page. I want to restore the input text if it has not been changed (when the focus is lost). How can I do this?
<html>
<head>
</head>
<body>
<script type="text/javascript">
function clearTextArea(object){
object.value = "";
}
</script>
<input type="text" id="option" value="test" onfocus="clearTextArea(this);"></input>
</body>
</html>
Is there anything against using an
<input (...) onblur="this.value = 'test'">
listener?
(You can also do the same thing using a "placeholder" attribute if youre working with HTML5)
At your clearTextArea method take the current text in the text area and store in into a hidden field or a cookie. Then at on blur event, check if the value changed.

$("#myForm").attr("action") returns a form element instead of undefined for forms with no actions

I have this basic example:
<!doctype HTML>
<html>
<head>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#showAction").click(function(){
alert($("#myForm").attr("action"));
});
});
</script>
</head>
<body>
<form id="myForm">
<input type="text" name="action" value="myAction" />
</form>
<input type="button" value="click me" id="showAction" />
</body>
</html>
When you click 'click me' you can see the tag
$("#myForm").attr("action");
Doesn't actually return an attribute of the element. It returns the child of the form with the name "action".
Is this expected behavior? Is this a bug in jQuery?
It's a "bug" introduced by Netscape a long time ago (a boneheaded move, IMO), where form.action is a property because an element with that name is a child of the <form>. So no, it's not really a jQuery bug, but a JavaScript one, depending on your point of view...jQuery just doesn't have any additional checks for these cases.
To be safe, don't name your elements "action" or "submit", since it can mess with form.submit() as well.
Very odd indeed. I am going to quietly say - bug...
Form with an action attribute: http://jsfiddle.net/vMTYY/
Form without an action attribute: http://jsfiddle.net/ZWWTm/

How do you replace content without losing focus?

For example:
<input type="text" name="test" onChange="document.formname.test.value=.document.formname.test.value.replace('something','something else')" />
The replace function works but it loses focus on every change
How do you make it not lose focus?
What I'm trying to do is make it so that certain text is immediately replaced with new text when its typed but you can continue typing
Short answer: document.formname.test.focus();
<input type="text" name="test" onChange="document.formname.test.value=document.formname.test.value.replace('something','something else'); document.formname.test.focus();" />
If you want to maintain focus on that input try:
onChange="document.formname.test.value=.document.formname.test.value.replace('something','something else'); document.formname.test.focus();"
Please do not use the onChange attribute javascript should never be in the html markup endless absolutely necessary. instead include your script at the end of the page body.
<body>
some content...
<script src="path to your script" type="text/javascript"></script>
</body>

Categories