Question

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

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>

Answer 1

在<script></script>标记内部是您的JavaScript所在位置（虽然我们更喜欢将其放在单独的文件中，因此HTML页面本身不会存在任何JavaScript）。

在此内容中，您可以调用$(document).ready()来传递function() { ... }。在该函数内部是文档加载后将执行的所有代码。

在功能中，您可以调用$('#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);
}

Answer 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

Answer 3

哦，这个做起来比说的容易！

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

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

3 个答案: