Set cursor position in an input text field
Question
After a lot of search I found the following threads:
define cursor position in form input field
jQuery Set Cursor Position in Text Area
Unfortunately in none of the posts a complete form embed code or a real example is given. Now I just don't know how to include nemisj's code (on the first link) or Mark's code (on the second link) into my form:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#site").focus(function(){
if( this.value == this.defaultValue ) {
$(this).val("http://");
}
});
});
</script>
</head>
<body>
<form action="#" method="post">
<input id="name" type="text" name="name" value="Name" /><br />
<input id="site" type="text" name="mail" value="Website" /><br />
<input type="submit" value="Send">
</form>
</body>
</html>
I wonder if someone could kindly help me with this as I'm badly stuck!
Many thanks in advance!
Here's the edited code, but it still doesn't work:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script>
function setCursor(node,pos){
var node = (typeof node == "string" || node instanceof String) ? document.getElementById(node) : node;
if(!node){
return false;
}else if(node.createTextRange){
var textRange = node.createTextRange();
textRange.collapse(true);
textRange.moveEnd(pos);
textRange.moveStart(pos);
textRange.select();
return true;
}else if(node.setSelectionRange){
node.setSelectionRange(pos,pos);
return true;
}
return false;
}
$(document).ready(function(){
$("#site").focus(function(){
if( this.value == this.defaultValue ) {
$(this).val("http://");
var node = $(this).get(0);
setCursor(node,node.value.length);
}
});
});
</script>
</head>
<body>
<form action="#" method="post">
<input id="name" type="text" name="name" value="Name" /><br />
<input id="site" type="text" name="mail" value="Website" /><br />
<input type="submit" value="Send">
</form>
</body>
</html>
3 answers
solution1
4 2011-04-22 13:33:41
Inside your <script></script> tag is where your JavaScript goes (although we prefer putting it in a separate file, so that no JavaScript lives on the HTML page itself).
Inside that, you have a call to $(document).ready() , which passes a function() { ... } . Inside that function is all the code that will be executed when your document has loaded.
Inside that function you have a call to $('#site').focus() which itself provides a function — this time one that will be called whenever the #site element gains focus. And presumably that's where you want to change the cursor position.
So, taking the setCursor function from Set cursor at a length of 14 onfocus of a textbox you can put that anywhere in your <script></script> and then inside that innermost function of yours you can write:
if( this.value == this.defaultValue ) {
$(this).val("http://");
var node = $(this).get(0);
setCursor(node,node.value.length);
}
solution2
2 2012-10-18 16:01:23
I think I found the error in your setCursor method. The moveStart and moveEnd methods expect two arguments, the first being the unit it should use. Also, the end position appears to be relative to the start position. So I think instead of
textRange.moveEnd(pos);
textRange.moveStart(pos);
you want
textRange.moveStart('character', pos);
textRange.moveEnd('character', 0);
See: http://msdn.microsoft.com/en-us/library/ie/ms536623(v=vs.85).aspx
solution3
0 2021-02-02 10:11:23
Oh, this one's easier done than said!
<script>
function setCursorInputPosition(e, pos) {
e.setSelectionRange(pos, pos);
}
</script>
<input onfocus="setCursorInputPosition(this, this.value.length);">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.