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

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

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


当前回答

如果你需要聚焦一些文本框,你唯一的问题是整个文本被高亮显示,而你想要插入符号在结尾,那么在这种特定的情况下,你可以使用这个技巧来设置文本框的值为自己的焦点后:

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

其他回答

HTMLInputElement。临时人选;

// References
var e = document.getElementById( "helloworldinput" );

// Move caret to beginning on focus
e.addEventListener( "focus", function( event )
{
    // References
    var e = event.target;

    // Action
    e.setSelectionRange( 0, 0 );            // Doesn’t work for focus event
    
    window.setTimeout( function()
    {
        e.setSelectionRange( 0, 0 );        // Works
        //e.setSelectionRange( 1, 1 );      // Move caret to second position
        //e.setSelectionRange( 1, 2 );      // Select second character

    }, 0 );

}, false );

浏览器兼容性(仅适用于文本、搜索、url、电话和密码类型): https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange#Specifications

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); }
<!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 setCaretPosition(elemId, caretPos)
{
 var elem = document.getElementById(elemId);
 if (elem)
 {
  if (typeof elem.createTextRange != 'undefined')
  {
   var range = elem.createTextRange();
   range.move('character', caretPos);
   range.select();
  }
  else
  {
   if (typeof elem.selectionStart != 'undefined')
    elem.selectionStart = caretPos;
   elem.focus();
  }
 }
}

如果你需要聚焦一些文本框,你唯一的问题是整个文本被高亮显示,而你想要插入符号在结尾,那么在这种特定的情况下,你可以使用这个技巧来设置文本框的值为自己的焦点后:

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