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

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

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

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

[设置键盘插入符号位置在文本框或文本区域与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

答案中的链接被打破,这一个应该工作(所有学分去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(); } } 

因为实际上我真的需要这个解决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; } } } } 

我已经调整了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); } } } 
 <!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> 
 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); } 

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

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