設置文本框中最後一個字符後的焦點

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

如何在倒退時在內容末尾設置焦點？

來源

2011-01-05 Josh

的重複http://stackoverflow.com/questions/511088/use-javascript-to-place-cursor-at-end-of-text-in-text-input-element – 2011-01-05 21:40:12

另一個簡單的方法在這裏：http://stackoverflow.com/a/19568146/1032372 – shim 2014-11-25 21:29:37

這是實現它的簡單方法。如果你倒退，只需添加 $("#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 2011-01-05 21:44:44

謝謝喬希。我看到了錯誤並更正了它。 – ChrisG 2011-01-05 21:52:24

卡拉不克拉。爲了以防萬一，我還將它包裝在try..catch中，並且在開始時放入了「if（elemLen == 0）{return;}」。你的代碼的第一行也沒有像其他的那樣格式化。除此之外，感謝代碼:) – Anthony 2011-10-19 16:19:36

代碼的任何瀏覽器：

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 2015-06-05 12:52:57

我嘗試了很多不同的解決方案，唯一一個爲我工作的是基於Chris G在本頁面上的解決方案（但稍作修改）。

我已經把它變成一個jQuery插件，以備將來使用的人需要它的使用

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

例如：

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

來源

2012-02-23 01:54:52

+1爲使這個插件。請記住在調用此函數之前調用元素上的focus（）。 – flu 2012-09-17 10:23:46

這似乎並沒有在IE中正常工作，只有FF。在IE中，它可以追溯到文本的開頭。有沒有人遇到過這種情況？ – Cheeky 2013-01-13 15:33:02

爲什麼地球上有一個美元符號在JavaScript變量前面？另外，用「var」聲明它。 – 2013-04-09 13:56:26

<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

這工作對我很好。 [參考：非常漂亮的插件由加文·G]

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

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

來源

2014-07-08 15:25:05 Devasish

@Gavin G版本不適用於我，但這是一個。 – 2017-09-27 22:17:27

你可以在文本框的最後一個位置按以下設置指針。

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

設置文本框中最後一個字符後的焦點

回答

相關問題