在文本框中将焦点设置在最后一个字符之后

71

我有3个用于输入电话号码的文本框。当用户键入内容时，它会自动从一个文本框移动到下一个文本框。当用户按下退格键时，我可以将焦点移到上一个文本框。问题在于，在IE中，焦点设置为文本框的开头。这是我的代码，在chrome中可以正常工作。

$('#AreaCode').live('keyup', function (event) {
    if ($(this).val().length == $(this).attr("maxlength"))
        $('#Prefix').focus();
});

$('#Prefix').live('keyup', function (event) {
    if (event.keyCode == 8 && $(this).val().length == 0)
        $('#AreaCode').focus();

    if ($(this).val().length == $(this).attr("maxlength"))
        $('#Number').focus();
});

$('#Number').live('keyup', function (event) {
    if (event.keyCode == 8 && $(this).val().length == 0)
        $('#Prefix').focus();
});

向后移动时如何将焦点设置在内容的末尾？

jquery focus

— 乔希
source

1

stackoverflow.com/questions/511088/…的

— Alex Vidal

此处的另一种简单方法：stackoverflow.com/a/19568146/1032372

— shim

96

这是简单的方法。如果要倒退，只需$("#Prefix").val($("#Prefix").val()); 在设置焦点后添加

这是更合适（更干净）的方法：

function SetCaretAtEnd(elem) {
        var elemLen = elem.value.length;
        // For IE Only
        if (document.selection) {
            // Set focus
            elem.focus();
            // Use IE Ranges
            var oSel = document.selection.createRange();
            // Reset position to 0 & then set at end
            oSel.moveStart('character', -elemLen);
            oSel.moveStart('character', elemLen);
            oSel.moveEnd('character', 0);
            oSel.select();
        }
        else if (elem.selectionStart || elem.selectionStart == '0') {
            // Firefox/Chrome
            elem.selectionStart = elemLen;
            elem.selectionEnd = elemLen;
            elem.focus();
        } // if
    } // SetCaretAtEnd()

— 克里斯·克
source

插入符号不是克拉。我也将它包装在try..catch中，以防万一，并在开始处放置“ if（elemLen == 0）{return;}”。同样，代码的第一行的格式也不像其余的那样。除此之外，感谢您的代码:)

— Anthony

感谢您的拼写/格式修复。我更新了答案以解决此问题。很高兴它对你有效。

— ChrisG 2011年

3

我elem = $(elem).get(0);在var elemLen = elem.value.length;之前的第二行添加了内容。如果对象是jQuery对象，则它将转换为javascript对象。如果它仍然是javascript对象，则此行将不会执行任何操作，因为一切都很好:)此行避免了错误“ elem.value未定义”。

— ReynekeVosz

为我工作-值得一提的是，您应该将注意力集中在价值链的末端以提高效率

— Liath 2015年

您从exceptionshub.com/…复制了此代码。

— jasinth premkumar

53

我尝试了许多不同的解决方案，唯一对我有用的解决方案是基于Chris G在本页上的解决方案（但略有修改）。

我已经将它变成了jQuery插件，供以后需要它的任何人使用

(function($){
    $.fn.setCursorToTextEnd = function() {
        var $initialVal = this.val();
        this.val($initialVal);
    };
})(jQuery);

使用示例：

$('#myTextbox').setCursorToTextEnd();

— 加文·G
source

2

+1用于使其成为插件。请记住focus()在调用此函数之前先调用元素。

— 流感

2

这似乎无法在IE中正常运行，只有FF。在IE中，它可以追溯到文本的开头。还有其他人遇到这个吗？

— Paolo Broccardo 2013年

2

为什么到底在JavaScript变量前面有一个美元符号？另外，用“ var”声明它。

— Mathias Lykkegaard Lorenzen 2013年

2

@MathiasLykkegaardLorenzen将美元符号放在jQuery变量前面是一些人建议的做法，以区分jQuery var和普通JS变量。但是，在这种情况下完全没有必要，因为此变量仅在函数范围内可用，这显然是jQuery函数。

6

@ gavin-g很棒的插件。进行了一次更新，使其可以跨浏览器使用。this.val('').val(initialVal);首先清除价值似乎有所帮助。

— Bradmage 2014年

45

这对我来说很好。[参考：Gavin G非常漂亮的插件]

(function($){
    $.fn.focusTextToEnd = function(){
        this.focus();
        var $thisVal = this.val();
        this.val('').val($thisVal);
        return this;
    }
}(jQuery));

$('#mytext').focusTextToEnd();

— 消失
source

2

@Gavin G版本不适用于我，但此版本适用。

— 路易斯·里维拉

26

您应该这样编写。

var num = $('#Number').val();        
$('#Number').focus().val('').val(num);

— Arjun
source

21

任何浏览器的代码：

function focusCampo(id){
    var inputField = document.getElementById(id);
    if (inputField != null && inputField.value.length != 0){
        if (inputField.createTextRange){
            var FieldRange = inputField.createTextRange();
            FieldRange.moveStart('character',inputField.value.length);
            FieldRange.collapse();
            FieldRange.select();
        }else if (inputField.selectionStart || inputField.selectionStart == '0') {
            var elemLen = inputField.value.length;
            inputField.selectionStart = elemLen;
            inputField.selectionEnd = elemLen;
            inputField.focus();
        }
    }else{
        inputField.focus();
    }
}

— 吉尔赫姆
source

试图回答的加载后终于它的工作... :)我使用的是IE 8

— Diganta

12

您可以按照以下说明在文本框的最后位置设置指针。

temp=$("#txtName").val();
$("#txtName").val('');
$("#txtName").val(temp);
$("#txtName").focus();

— 丹斯
source

9

可以在input标签内使用这些简单的javascript。

<input type="text" name="your_name" value="your_value"
     onfocus="this.setSelectionRange(this.value.length, this.value.length);" 
autofocus />

— 桑托什·萨塔皮蒂
source

2

var val =$("#inputname").val();
$("#inputname").removeAttr('value').attr('value', val).focus();
// I think this is beter for all browsers...

— 沼气
source

1

<script type="text/javascript">
    $(function(){
        $('#areaCode,#firstNum,#secNum').keyup(function(e){
            if($(this).val().length==$(this).attr('maxlength'))
                $(this).next(':input').focus()
        })
    })
    </script>

<body>

<input type="text" id="areaCode" name="areaCode" maxlength="3" value="" size="3" />- 
<input type="text" id="firstNum" name="firstNum" maxlength="3" value="" size="3" />- 
<input type="text" id="secNum" name=" secNum " maxlength="4" value="" size="4" />

</body>

— 拉杰库玛
source

1

克里斯·科耶尔（Chris Coyier）为此提供了一个迷你jQuery插件，效果很好：http : //css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

如果支持，它将使用setSelectionRange，否则具有可靠的后备。

jQuery.fn.putCursorAtEnd = function() {
  return this.each(function() {
    $(this).focus()
    // If this function exists...
    if (this.setSelectionRange) {
      // ... then use it (Doesn't work in IE)
      // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
      var len = $(this).val().length * 2;
      this.setSelectionRange(len, len);
    } else {
      // ... otherwise replace the contents with itself
      // (Doesn't work in Google Chrome)
      $(this).val($(this).val());
    }
    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Google Chrome)
    this.scrollTop = 999999;
  });
};

然后，您可以执行以下操作：

input.putCursorAtEnd();

— 普拉泰克
source