電話番号用に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();
});
後方に移動するときに、コンテンツの最後にフォーカスを設定するにはどうすればよいですか?
これは簡単な方法です。後戻りする場合は、フォーカスを設定した後に$("#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()
私は多くの異なるソリューションを試してみましたが、私のために働いた唯一のソリューションは、このページのChris Gによるソリューションに基づいていました(ただし、わずかな変更を加えました)。
私はそれを必要とする人のために将来使用するためにjQueryプラグインに変えました
(function($){
$.fn.setCursorToTextEnd = function() {
var $initialVal = this.val();
this.val($initialVal);
};
})(jQuery);
使用例:
$('#myTextbox').setCursorToTextEnd();
これは私にはうまくいきます。 [参照:Gavin Gによる非常に素晴らしいプラグイン]
(function($){
$.fn.focusTextToEnd = function(){
this.focus();
var $thisVal = this.val();
this.val('').val($thisVal);
return this;
}
}(jQuery));
$('#mytext').focusTextToEnd();
このようにコーディングする必要があります。
var num = $('#Number').val();
$('#Number').focus().val('').val(num);
任意のブラウザーのコード:
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();
}
}
次のように、テキストボックスの最後の位置にポインターを設定できます。
temp=$("#txtName").val();
$("#txtName").val('');
$("#txtName").val(temp);
$("#txtName").focus();
Inputタグ内でこれらの単純なJavaScriptを使用できます。
<input type="text" name="your_name" value="your_value"
onfocus="this.setSelectionRange(this.value.length, this.value.length);"
autofocus />
var val =$("#inputname").val();
$("#inputname").removeAttr('value').attr('value', val).focus();
// I think this is beter for all browsers...
<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>
これは、値を取得するときに、クライアントとサーバー側で入力値をトリム(スペースを削除)することを確認するのに役立ちます。
$("#your-Selector").focus().val(' 1');