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>
Related
Here's the code for the form as it stands:
<form onsubmit="return false;" role="search" method="get" id="searchform" action="window.location.reload()" autocomplete="off">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" class="searchbar" >
</div>
</form>
Since I'm actually using a 'live search' plugin from wordpress (searches without navigating to another page), and it has a bug where deleting and re-entering the same text does not search again, I was wondering how I would get the page to reload if the user just pressed enter in the search box?
My second question is how to get the search bar to be highlighted or selected by default upon the page being loaded, just like Google? I've tried this:
<body onload"
$(function() {
$("input[name='s']").focus();
});
">
But it doesn't seem to do anything. Any help on either of these problems would really be appreciated!
You're not escaping the double quotes in the onload function. You can fix that by escaping the quotes with backslashes, but a better way to fix this is to put this code in a <script> tag (instead of inline):
<script>
$(function() {
$("input[name='s']").focus();
});
</script>
When using the $() function like this, it acts as a shortcut for $(document).ready(), so there's no need to attach it to the body's onload event.
Just to clarify, the other way to fix it would be to use escaped single quotes, like so:
<body onload"
$(function() {
$('input[name=\'s\']').focus();
});">
But I highly recommend you put this in a <script> tag. It's better not to use inline JavaScript, and with jQuery there is no need to.
I'm working on an application, and I want a text field to be selected when the page is loading so that when a user uses Ctrl + v it paste the content inside the textbox. Any one knows how to do that?
the text field is
<div>
<input wicket:id="email-address" type="text" id="textbox-email" />
</div>
Thanks!
3p3r answer is of course perfectly right. If you want this to be reusable and contolled via wicket, than please check the wicket wiki page.
You can use HTML5's autofocus attribute:
<input type="text" autofocus />
Works of course for just one field.
you should set focus to your input:
document.forms['your_form'].elements['your_textbox'].focus();
For your example above:
document.getElementById('textbox-email').focus()
After it gained focus, you should select it:
either add this onfocus attribute to your inputs (better)
<input type="text" onfocus="this.select()" />
Or use this jQuery snippet (best):
$(document).ready(function() {
$("#textbox-email").focus(function() { $(this).select(); } );
});
Pure Javascript:
var element = document.getElementById('textbox-email');
element.onfocus = function() {element.select();}
document.getElementById('textbox-email').focus();
Add the whole thing to window.onload or onload attribute of body tag.
How do I make it so when my web page loads, the cursor automatically goes to a given text field? (For example, on Google when you load the page, the blinking cursor is already on the search box)
You need to use JavaScript. e.g.
<input type="text" id="search" />
<script type="text/javascript">
document.getElementById('search').focus()
</script>
Be careful implementing this functionality. It's very annoying for a user to focus on a field and start typing only to find the caret has been redirected while typing when the page finished loading. I've seen this happen on numerous sites.
I'd suggest using the HTML5 autofocus attribute and falling back to a JavaScript solution in browsers which don't support it. The following gets round the above problem by not waiting for the document to load before setting the focus:
<input type="text" name="search" id="search" autofocus>
<script type="text/javascript">
var input = document.getElementById("search");
if ( !("autofocus" in input) ) {
input.focus();
}
</script>
More information can be found at diveintohtml.org: http://diveintohtml5.ep.io/forms.html#autofocus
Try
<body onLoad="document.form1.txtBox1.focus()">
Since HTML5 is in full force, I believe autofocus is well supported. I would take heed to the other answers here, but in my opinion, much easier than JavaScript:
<input type="text" name="name" autofocus>
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
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.