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

问题描述：

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

如何在倒退时在内容末尾设置焦点？

的重复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()

你有一个轻微的语法错误，但它像一个冠军。 – 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(); 
    } 
}

终于尝试加载答案后，它的工作...... :) 我使用的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();

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

答

这工作对我很好。 [参考：非常漂亮的插件由加文·G]

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

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

@Gavin G版本不适用于我，但这是一个。 – 2017-09-27 22:17:27

答

你可以在文本框的最后一个位置按以下设置指针。

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

答

你应该这样编码。

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

答

可以在输入标签中使用这些简单的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...

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

相关推荐