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

私は電話番号のために3つのテキストボックスを持っています。ユーザーが入力すると、自動的に1つのテキストボックスから次のテキストボックスに移動します。ユーザーがbackspaceを押すと、前のテキストボックスにフォーカスを移動できます。問題は、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(); 
});

逆方向に進むときにコンテンツの最後にフォーカスセットを作成するにはどうすればよいですか？

出典

2011-01-05 Josh

http://stackoverflow.com/questions/511088/use-javascript-to-place-cursor-at-end-of-text-in-text-input-elementの重複 –

別の簡単な方法はここにあります：http://stackoverflow.com/a/19568146/1032372 – shim

これは簡単な方法です。あなたは後方つもりなら、あなたが焦点に設定した後、ちょうど $("#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()

出典

2011-01-05 21:37:42 ChrisG

あなたは少し構文エラーがありますが、それはチャンピオンのように動作します。 – Josh

ありがとうございました。私はエラーを見て、それを修正しました – ChrisG

キャレットはありません。私はまたtry..catchの中でそれを包み込み、開始の近くに "if（elemLen == 0）{return;}"を入れます。また、コードの最初の行は残りのように書式設定されていません。それ以外のコードのためにありがとう:) – Anthony

コード：

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

出典

2012-02-19 17:06:10 Guilherme

最終的には多くの答えを試した後に、それは働いた... :) 私はIE 8を使用しています。 – Diganta

私はさまざまなソリューションを試してみましたが、私のために働いたのは、このページのChris Gによる解決策に基づいていました（わずかな変更）。

私はそれを利用

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

例を必要とする人のための将来の使用のためのjQueryプラグインにそれを有効にしている：

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

出典

2012-02-23 01:54:52

+1これをプラグインにします。この関数を呼び出す前に、要素の 'focus（）'を呼び出すことに注意してください。 – flu

IEでは正しく動作していないようですが、FFのみです。 IEでは、テキストの先頭に戻ります。誰かがこれを経験していますか？ – Cheeky

JavaScript変数の前にドル記号が表示されるのはなぜですか？また、 "var"で宣言してください。 –

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

出典

2013-03-08 08:42:09 Rajkumar

これは私のために正常に動作します。 [参照：Gavin Gの素晴らしいプラグイン]

出典

2014-07-08 15:25:05 Devasish

@Gavin Gバージョンは私のためには機能しませんでしたが、これはそうです。 –

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

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

出典

2015-05-26 10:34:03 Dens

このようにコードする必要があります。

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

出典

2016-09-13 11:10:50

入力タグ内でこれらの単純なjavascriptを使用できます。

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

出典

2017-10-03 11:15:07

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

出典

2017-10-17 09:12:36 mangas

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

答えて

関連する問題