使用JavaScript将光标置于文本input元素中的文本末尾
什么是最好的方法（我认为最简单的方法）将光标放在input文本元素的文本的末尾通过JavaScript – 焦点已设置为元素之后？
我在IE中面对同样的问题（通过RJS /原型设置焦点之后）。 当字段已经有一个值的时候，Firefox已经离开游标了。 IE强制光标移动到文本的开头。
我到达的解决scheme如下：
<input id="search" type="text" value="mycurrtext" size="30" onfocus="this.value = this.value;" name="search"/> 这适用于IE7和FF3
有一个简单的方法可以在大多数浏览器中使用它。
this.selectionStart = this.selectionEnd = this.value.length;
然而，由于less数浏览器的怪癖，更具包容性的答案看起来更像这样
setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);
使用jQuery （设置监听器，但不是必须的）
$('#el').focus(function(){ var that = this; setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id='el' type='text' value='put cursor at end'>
试试这个，它对我有效：
//input is the input element input.focus(); //sets focus to element var val = this.input.value; //store the value of the element this.input.value = ''; //clear the value of the element this.input.value = val; //set that value back.
为了使光标移动到最后，input必须首先具有焦点，然后当值被改变时，它将到达末尾。 如果将.value设置为相同，则不会在Chrome中更改。
经过这一点，我发现最好的方法是使用setSelectionRange函数，如果浏览器支持它; 如果没有的话，回到使用Mike Berrow的答案中的方法（即用自己replace值）。
我也设置scrollTop到一个很高的值，以防我们在一个垂直滚动的textarea 。 （在Firefox和Chrome中，使用任意高值似乎比$(this).height()更可靠。
我已经把它作为一个jQuery插件。 （如果你没有使用jQuery，我相信你仍然可以很容易地得到这个要点。）
我已经testing过IE6，IE7，IE8，Firefox 3.5.5，Google Chrome 3.0，Safari 4.0.4，Opera 10.00。
它作为PutCursorAtEnd插件在jquery.com上提供 。 为了您的方便，1.0版本的代码如下：
// jQuery plugin: PutCursorAtEnd 1.0 // http://plugins.jquery.com/project/PutCursorAtEnd // by teedyay // // Puts the cursor at the end of a textbox/ textarea // codesnippet: 691e18b1-f4f9-41b4-8fe8-bc8ee51b48d4 (function($) { jQuery.fn.putCursorAtEnd = function() { return this.each(function() { $(this).focus() // If this function exists... if (this.setSelectionRange) { // ... then use it // (Doesn't work in IE) // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh. var len = $(this).val().length * 2; this.setSelectionRange(len, len); } else { // ... otherwise replace the contents with itself // (Doesn't work in Google Chrome) $(this).val($(this).val()); } // Scroll to the bottom, in case we're in a tall textarea // (Necessary for Firefox and Google Chrome) this.scrollTop = 999999; }); }; })(jQuery);
<script type="text/javascript"> function SetEnd(txt) { if (txt.createTextRange) { //IE var FieldRange = txt.createTextRange(); FieldRange.moveStart('character', txt.value.length); FieldRange.collapse(); FieldRange.select(); } else { //Firefox and Opera txt.focus(); var length = txt.value.length; txt.setSelectionRange(length, length); } } </script>
这个function适用于IE9，Firefox 6.x和Opera 11.x
我已经尝试了以下在Chrome中取得了相当大的成功
$("input.focus").focus(function () { var val = this.value; var $this = $(this); $this.val(""); setTimeout(function () { $this.val(val); }, 1); });
快速破解：
它将每个input字段都以类为焦点，然后将input字段的旧值存储在一个variables中，之后将空string应用于input字段。
然后等待1毫秒，再次放入旧值。
简单。 在编辑或更改数值时，首先放置焦点，然后设置值。
$("#catg_name").focus(); $("#catg_name").val(catg_name);
仍然需要中间variables（参见var val =），否则游标行为很奇怪，我们最后需要它。
<body onload="document.getElementById('userinput').focus();"> <form> <input id="userinput" onfocus="var val=this.value; this.value=''; this.value= val;" class=large type="text" size="10" maxlength="50" value="beans" name="myinput"> </form> </body>
对于所有情况下的所有浏览器：
function moveCursorToEnd(el) { window.setTimeout(function () { if (typeof el.selectionStart == "number") { el.selectionStart = el.selectionEnd = el.value.length; } else if (typeof el.createTextRange != "undefined") { var range = el.createTextRange(); range.collapse(false); range.select(); } }, 1); }
如果需要从onFocus事件处理程序中移动光标，则需要超时
在jQuery中，就是这样
$(document).ready(function () { $('input').focus(function () { $(this).attr('value',$(this).attr('value')); } }
采取一些答案..做一个单行的jQuery。
$('#search').focus().val($('#search').val());
如果input字段只需要一个静态默认值，我通常使用jQuery来做到这一点：
$('#input').focus().val('Default value');
这似乎适用于所有浏览器。
我刚刚发现，在iOS中，设置textarea.textContent属性会将光标放在textarea元素中每次文本的末尾。 该行为是我的应用程序中的一个错误，但似乎是你可以有意使用的东西。
这个问题很有趣。 最令人困惑的是，我没有find解决scheme完全解决了这个问题。
+++++++解决scheme+++++++
-
你需要一个JS函数，像这样：
function moveCursorToEnd(obj) { if (!(obj.updating)) { obj.updating = true; var oldValue = obj.value; obj.value = ''; setTimeout(function(){ obj.value = oldValue; obj.updating = false; }, 100); } } -
你需要在onfocus和onclick事件中给这个家伙打个电话。
<input type="text" value="Test Field" onfocus="moveCursorToEnd(this)" onclick="moveCursorToEnd(this)">
它在所有设备上工作浏览器！
设置光标，当点击文本区域到文本的结尾…这个代码的变化是…也工作！ 适用于Firefox，IE，Safari，Chrome ..
在服务器端代码中：
txtAddNoteMessage.Attributes.Add("onClick", "sendCursorToEnd('" & txtAddNoteMessage.ClientID & "');")
在Javascript中：
function sendCursorToEnd(obj) { var value = $(obj).val(); //store the value of the element var message = ""; if (value != "") { message = value + "\n"; }; $(obj).focus().val(message); $(obj).unbind(); }
var valsrch = $('#search').val(); $('#search').val('').focus().val(valsrch);
虽然这可能是一个有很多答案的老问题，但我遇到了类似的问题，没有一个答案是我想要的和/或解释不好的。 selectionStart和selectionEnd属性的问题在于它们对于inputtypes数字不存在（而问题被要求input文本types，我认为这可能有助于其他可能需要其他inputtypes的对象）。 所以，如果你不知道inputtypes的function是否是一个types编号，你不能使用该解决scheme。
跨浏览器和所有inputtypes的解决scheme相当简单：
- 获取并将input的值存储在一个variables中
- 集中input
- 将input的值设置为存储的值
这样游标就在input元素的末尾。
所以你所要做的就是这样（使用jquery，假设元素select器可以通过单击元素的data-focus-element数据属性访问，然后单击“.foo”元件）：
$('.foo').click(function() { element_selector = $(this).attr('data-focus-element'); $focus = $(element_selector); value = $focus.val(); $focus.focus(); $focus.val(value); });
为什么这个工作？ 简单地说，当调用.focus（）时，焦点将被添加到input元素的开始处（这是这里的核心问题），而忽略了input元素已经有一个值的事实。 但是，如果更改了input的值，则会自动将光标放在input元素内的值的末尾。 因此，如果您使用之前在input中input的相同值覆盖该值，则该值将保持不变，然而，光标将移至末尾。
如果先设置了值，然后设置焦点，则光标将始终显示在最后。
$("#search-button").click(function (event) { event.preventDefault(); $('#textbox').val('this'); $("#textbox").focus(); return false; });
这里是testinghttps://jsfiddle.net/5on50caf/1/小提琴
我之前尝试过的build议，但没有为我工作（在Chrome中testing），所以我写了自己的代码 – 它在Firefox，IE浏览器，Safari浏览器，Chrome浏览器工作正常…
在Textarea：
onfocus() = sendCursorToEnd(this);
在Javascript中：
function sendCursorToEnd(obj) { var value = obj.value; //store the value of the element var message = ""; if (value != "") { message = value + "\n"; }; $(obj).focus().val(message);}
这是我的答案jsFiddle演示 。 演示使用CoffeeScript，但是如果需要的话，您可以将其转换为普通的JavaScript 。
JavaScript中的重要部分：
var endIndex = textField.value.length; if (textField.setSelectionRange) { textField.setSelectionRange(endIndex, endIndex); }
我正在发布这个答案，因为我已经写了给其他人有同样的问题。 这个答案并不包括这里最好的答案，但它适用于我，并有一个jsFiddle演示，你可以玩。
这里是jsFiddle的代码，所以即使jsFiddle消失，这个答案也会被保留下来：
moveCursorToEnd = (textField) -> endIndex = textField.value.length if textField.setSelectionRange textField.setSelectionRange(endIndex, endIndex) jQuery -> $('.that-field').on 'click', -> moveCursorToEnd(this)
<div class="field"> <label for="pressure">Blood pressure</label>: <input class="that-field" type="text" name="pressure" id="pressure" value="24"> </div> <p> Try clicking in the text field. The cursor will always jump to the end. </p>
body { margin: 1em; } .field { margin-bottom: 1em; }
input = $('input'); input.focus().val(input.val()+'.'); if (input.val()) {input.attr('value', input.val().substr(0,input.val().length-1));}
那么，我只是使用：
$("#myElement").val($("#myElement").val());
试试下面的代码：
$('input').focus(function () { $(this).val($(this).val()); }).focus()
