有人知道如何移动文本框中的键盘插入符号到特定位置吗?
例如,如果一个文本框(例如输入元素,而不是文本区域)有50个字符,我想在字符20之前放置插入符号,我该怎么做呢?
这是在区别于这个问题:jQuery设置光标位置在文本区域,这需要jQuery。
有人知道如何移动文本框中的键盘插入符号到特定位置吗?
例如,如果一个文本框(例如输入元素,而不是文本区域)有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> </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());