在输入文本字段中设置光标位置答案

【问题标题】：Set cursor position in an input text field在输入文本字段中设置光标位置
【发布时间】：2011-04-22 13:18:26
【问题描述】：

经过大量搜索，我找到了以下主题：

define cursor position in form input field

不幸的是，在所有帖子中都没有给出完整的表单嵌入代码或真实示例。现在我只是不知道如何将 nemisj 的代码（在第一个链接上）或 Mark 的代码（在第二个链接上）包含到我的表单中：

<!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>

我想知道是否有人可以帮我解决这个问题，因为我被严重卡住了！

非常感谢！

这是修改后的代码，但还是不行：

<!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>

【问题讨论】：

createTextRange 是一种仅限 Internet Explorer 的方法。不要使用它

标签： javascript jquery

【解决方案1】：

在 <script></script> 标记中是 JavaScript 所在的位置（尽管我们更喜欢将它放在单独的文件中，这样 HTML 页面本身就不会存在 JavaScript）。

在其中，您调用了$(document).ready()，它传递了function() { ... }。该函数内部是加载文档时将执行的所有代码。

在 that 函数中，您调用了 $('#site').focus()，它本身提供了一个函数——这一次，只要 #site 元素获得焦点，就会调用该函数。大概这就是您要更改光标位置的地方。

因此，从 Set cursor at a length of 14 onfocus of a textbox 获取 setCursor 函数，您可以将其放在 <script></script> 的任何位置，然后您可以在最里面的函数中编写：

if( this.value == this.defaultValue ) {
    $(this).val("http://");

    var node = $(this).get(0);
    setCursor(node,node.value.length);
}

【讨论】：

感谢您的详细回答，但我希望您提供嵌入代码，因为我仍然无法使用它。我听从了你的指示，没有 aval ！ :(
您可能需要编辑您的问题以分享您最终得到的代码。

【解决方案2】：

我想我在您的 setCursor 方法中发现了错误。 moveStart 和 moveEnd 方法需要两个参数，第一个是它应该使用的单位。此外，结束位置似乎是相对于开始位置的。所以我认为不是

    textRange.moveEnd(pos);
    textRange.moveStart(pos);

你想要的

    textRange.moveStart('character', pos);
    textRange.moveEnd('character', 0);

见：http://msdn.microsoft.com/en-us/library/ie/ms536623(v=vs.85).aspx

【讨论】：

【解决方案3】：

哦，这比说起来容易！

<script>
function setCursorInputPosition(e, pos) {
  e.setSelectionRange(pos, pos);
}
</script>
<input onfocus="setCursorInputPosition(this, this.value.length);">

【讨论】：