web-dev-qa-db-ja.com

テキストボックスの最後の文字の後にフォーカスを設定

電話番号用に3つのテキストボックスがあります。ユーザーが入力すると、テキストボックス間を自動的に移動します。ユーザーがバックスペースを押すと、前のテキストボックスにフォーカスを移動できます。問題は、IEでは、フォーカスがテキストボックスの先頭に設定されることです。ここに私のコードがありますが、これはクロムでうまく動作します。

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

後方に移動するときに、コンテンツの最後にフォーカスを設定するにはどうすればよいですか？

jqueryfocus
62
Josh

これは簡単な方法です。後戻りする場合は、フォーカスを設定した後に$("#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()
91
ChrisG

私は多くの異なるソリューションを試してみましたが、私のために働いた唯一のソリューションは、このページのChris Gによるソリューションに基づいていました（ただし、わずかな変更を加えました）。

私はそれを必要とする人のために将来使用するためにjQueryプラグインに変えました

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

使用例：

$('#myTextbox').setCursorToTextEnd();
51
Gavin G

これは私にはうまくいきます。 [参照：Gavin Gによる非常に素晴らしいプラグイン]

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

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

このようにコーディングする必要があります。

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

任意のブラウザーのコード：

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

次のように、テキストボックスの最後の位置にポインターを設定できます。

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

Inputタグ内でこれらの単純なJavaScriptを使用できます。

<input type="text" name="your_name" value="your_value"
     onfocus="this.setSelectionRange(this.value.length, this.value.length);" 
autofocus />
1
Santosh Satapathy
var val =$("#inputname").val();
$("#inputname").removeAttr('value').attr('value', val).focus();
// I think this is beter for all browsers...
1
mangas
<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>
0
Rajkumar

これは、値を取得するときに、クライアントとサーバー側で入力値をトリム（スペースを削除）することを確認するのに役立ちます。

$("#your-Selector").focus().val(' 1');

0
csandreas1