在HTML文本框中设置键盘符号位置

有人知道如何将文本框中的键盘符号移动到特定的位置吗？

例如，如果一个文本框（例如input元素，而不是文本区域）中有50个字符，并且我想在字符20之前放置插入符号，那我该怎么处理呢？

这是与这个问题的区别： jQuery设置文本区域中的光标位置 ，这需要jQuery。

Answer 1

[设置键盘插入符号位置在文本框或文本区域与JavaScript] [1]通过Josh Stodola

编辑 ： 因为这已经downvoted了很多次，我去了，find一个在backback机上的副本：

有时能够将键盘插入符号插入文本框中的特定位置是非常好的。 在我看来，最常见的目的是textareas。 举一个理论的例子，我会解释一下我已经遇到过几次的情况。 我已经在textarea中input了一个段落来发表评论，消息，无论如何。 无论出于何种原因，我回到表单上，改变一个不同的领域，然后再回到文本区域。 默认情况下，它会突出显示textarea中的整个文本。 但是，我想追加一些文字！ 现在，我要么抓住我的鼠标，然后点击框的末端，或者使用一系列击键来将插入符号回到我需要的地方。

好吧，所以也许我在这里得到了太特别的方法。 但对我来说真的是一个小小的烦恼。 当然，我可以轻松地生活，但我已经提出了一个解决scheme。 这将是最好的（同样，这是我的意见）以编程方式强制键盘插入符跳转到文本区域结束时，它收到焦点。 我不会不同意，在某些情况下，它可以相当有说服力地突出重点的价值。 但是，对于textareas，我完全同意这一点。

无论如何，这就是我如何创build这个通用函数，将允许您插入插入任何位置的文本框或textarea，你希望…

function setCaretPosition(elemId, caretPos) { var elem = document.getElementById(elemId); if(elem != null) { if(elem.createTextRange) { var range = elem.createTextRange(); range.move('character', caretPos); range.select(); } else { if(elem.selectionStart) { elem.focus(); elem.setSelectionRange(caretPos, caretPos); } else elem.focus(); } } } 

第一个预期参数是要插入键盘插入符号的元素的ID。 如果元素不能被发现，什么都不会发生（显然）。 第二个参数是插入符号位置索引。 零将开始键盘脱字符号。 如果您传递的数字大于元素值中的字符数，则会将键盘插入符号放在最后。

我已经在几个浏览器上testing过了; 它可以在IE6以上，Firefox 2，Opera 8，Netscape 9，SeaMonkey和Safari上运行。 不幸的是在Safari浏览器不能与onfocus事件（叹息）结合使用。 如果有人可以快速访问一些旧版浏览器（或上面没有提到的任何浏览器），并testing一下，我真的很感激，如果你让我知道它是否有效。

请记住，上述function可能会用于几个不同的目的。 尽pipe我原来的目的有些不切实际，但是这个function还是有一定的潜力的！ 下面是使用它来应用我原来的目的的不显眼的例子：强制键盘插入符号跳转到页面上的所有文本区末尾，当他们收到焦点…

 function addLoadEvent(func) { if(typeof window.onload != 'function') { window.onload = func; } else { if(func) { var oldLoad = window.onload; window.onload = function() { if(oldLoad) oldLoad(); func(); } } } } // The setCaretPosition function belongs right here! function setTextAreasOnFocus() { /*** * This function will force the keyboard caret to be positioned * at the end of all textareas when they receive focus. */ var textAreas = document.getElementsByTagName('textarea'); for(var i = 0; i < textAreas.length; i++) { textAreas[i].onfocus = function() { setCaretPosition(this.id, this.value.length); } } textAreas = null; } addLoadEvent(setTextAreasOnFocus); 

[1]： http : //blog.josh420.com/archives/2007/10/setting-keyboard caret-position-in-a-textbox-or-textarea-with-javascript.aspx

Answer 2

答案中的链接被打破，这一个应该工作（所有学分去blog.vishalon.net）：

http://snipplr.com/view/5144/getset-cursor-in-html-textarea/

如果代码再次丢失，这里有两个主要function：

 function doGetCaretPosition(ctrl) { var CaretPos = 0; if (ctrl.selectionStart || ctrl.selectionStart == 0) {// Standard. CaretPos = ctrl.selectionStart; } else if (document.selection) {// Legacy IE ctrl.focus (); var Sel = document.selection.createRange (); Sel.moveStart ('character', -ctrl.value.length); CaretPos = Sel.text.length; } return (CaretPos); } function setCaretPosition(ctrl,pos) { if (ctrl.setSelectionRange) { ctrl.focus(); ctrl.setSelectionRange(pos,pos); } else if (ctrl.createTextRange) { var range = ctrl.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } } 

Answer 3

因为实际上我真的需要这个解决scheme，而且典型的基准解决scheme（ 将input重点 – 然后将其值设置为等于自身 ） 不能跨浏览器工作 ，所以我花了一些时间调整和编辑所有内容以使其工作。 build立在@ kd7的代码这里是我想出的。

请享用！ 适用于IE6 +，Firefox，Chrome，Safari，Opera

跨浏览器插入符号定位技术（例如：将光标移动到END）

 // ** USEAGE ** (returns a boolean true/false if it worked or not) // Parameters ( Id_of_element, caretPosition_you_want) setCaretPosition('IDHERE', 10); // example 

肉和土豆基本上是@ kd7的setCaretPosition，最大的调整是if (el.selectionStart || el.selectionStart === 0) ，在Firefox中selectionStart从0开始，当然在布尔值转向假的，所以它是在那里打破。

在chrome中，最大的问题是只给它.focus()是不够的（它不断的select所有的文本！）因此，我们设置自身的值，本身el.value = el.value; 在调用我们的函数之前，现在它有一个把握和位置与input使用selectionStart 。

 function setCaretPosition(elemId, caretPos) { var el = document.getElementById(elemId); el.value = el.value; // ^ this is used to not only get "focus", but // to make sure we don't have it everything -selected- // (it causes an issue in chrome, and having it doesn't hurt any other browser) if (el !== null) { if (el.createTextRange) { var range = el.createTextRange(); range.move('character', caretPos); range.select(); return true; } else { // (el.selectionStart === 0 added for Firefox bug) if (el.selectionStart || el.selectionStart === 0) { el.focus(); el.setSelectionRange(caretPos, caretPos); return true; } else { // fail city, fortunately this never happens (as far as I've tested) :) el.focus(); return false; } } } } 

Answer 4

我已经调整了kd7的答案，因为elem.selectionStart会在chooseStart偶然为0时计算为false。

 function setCaretPosition(elem, caretPos) { var range; if (elem.createTextRange) { range = elem.createTextRange(); range.move('character', caretPos); range.select(); } else { elem.focus(); if (elem.selectionStart !== undefined) { elem.setSelectionRange(caretPos, caretPos); } } } 

Answer 5

 <!DOCTYPE html> <html> <head> <title>set caret position</title> <script type="application/javascript"> //<![CDATA[ window.onload = function () { setCaret(document.getElementById('input1'), 13, 13) } function setCaret(el, st, end) { if (el.setSelectionRange) { el.focus(); el.setSelectionRange(st, end); } else { if (el.createTextRange) { range = el.createTextRange(); range.collapse(true); range.moveEnd('character', end); range.moveStart('character', st); range.select(); } } } //]]> </script> </head> <body> <textarea id="input1" name="input1" rows="10" cols="30">Happy kittens dancing</textarea> <p>&nbsp;</p> </body> </html> 

Answer 6

 function SetCaretEnd(tID) { tID += ""; if (!tID.startsWith("#")) { tID = "#" + tID; } $(tID).focus(); var t = $(tID).val(); if (t.length == 0) { return; } $(tID).val(""); $(tID).val(t); $(tID).scrollTop($(tID)[0].scrollHeight); } 

Answer 7

如果你需要关注一些文本框，唯一的问题是整个文本被突出显示，而你希望插入符号最后，那么在这种情况下，你可以使用这个把焦点设置为自己的文本框值的技巧：

 $("#myinputfield").focus().val($("#myinputfield").val());