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

Question

我有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();
});

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

Answer 1

这是一种简单的方法.如果您要倒退,只需$("#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()

Answer 2

我尝试了很多不同的解决方案,唯一适用于我的解决方案是基于Chris G在此页面上的解决方案(但稍作修改).

我把它变成了一个jQuery插件,供将来用于需要它的人使用

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

用法示例:

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

Answer 3

这对我来说很好.[参考:Gavin G非常好的插件]

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

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

Answer 4

你应该像这样编码.

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

Answer 5

任何浏览器的代码:

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();
    }
}

Answer 6

可以在输入标签中使用这些简单的 javascript。

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

Answer 7

您可以按照以下方式在文本框的最后位置设置指针.

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