有人知道如何移动文本框中的键盘插入符号到特定位置吗?
例如，如果一个文本框(例如输入元素，而不是文本区域)有50个字符，我想在字符20之前放置插入符号，我该怎么做呢?
这是在区别于这个问题:jQuery设置光标位置在文本区域，这需要jQuery。
摘自Josh Stodola的在文本框或文本区域设置键盘插入的位置用Javascript
一个泛型函数，允许您在文本框或文本区域的任何位置插入插入符号:
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。如果无法找到该元素，则什么也不会发生(显然)。第二个参数是插入符号位置索引。0会把键盘插入符号放在开头。如果传递的数字大于元素值中的字符数，则将键盘插入符放在末尾。
已在IE6及以上版本、Firefox 2、Opera 8、Netscape 9、SeaMonkey和Safari上测试。不幸的是，在Safari上，它不能与onfocus事件结合使用)。
下面是一个使用上述函数强制键盘插入符跳转到页面上所有文本区域的结尾的例子:
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);
答案中的链接坏了，这个应该可以工作(所有的学分都转到blog.vishalon.net):
http://snipplr.com/view/5144/getset-cursor-in-html-textarea/
为了防止代码再次丢失，这里有两个主要函数:
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();
}
}
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>
我稍微调整了kd7的答案，因为elem。当selectionStart恰好为0时，selectionStart将计算为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);
}
}
}
因为我确实需要这个解决方案，而典型的基线解决方案(聚焦输入-然后设置值等于本身)不能跨浏览器工作，所以我花了一些时间调整和编辑所有内容以使其工作。在@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开始的，在布尔中当然是变为False，所以它在这里中断了。
在chrome最大的问题是，只是给它.focus()是不够的(它一直选择所有的文本!)因此，我们将自身的值设为el。Value = el.value;在调用我们的函数之前，现在它有一个抓取&位置的输入使用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;
}
}
}
}
如果你需要聚焦一些文本框，你唯一的问题是整个文本被高亮显示，而你想要插入符号在结尾，那么在这种特定的情况下，你可以使用这个技巧来设置文本框的值为自己的焦点后:
$("#myinputfield").focus().val($("#myinputfield").val());
我将修复如下条件:
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();
}
}
}
我发现了一个简单的方法来解决这个问题，在IE和Chrome测试:
function setCaret(elemId, caret)
{
var elem = document.getElementById(elemId);
elem.setSelectionRange(caret, caret);
}
将文本框id和插入符号位置传递给此函数。
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
推荐文章
- 我可以在JavaScript中获得当前运行函数的名称吗?
- 如何防止输入键提交网页表单?
- 在html文本框中设置键盘插入符号的位置
- 使用jQuery选择多个类
- Cypress:只运行一个测试
- 如何同步确定JavaScript Promise的状态?
- 在Link react-router中传递道具
- 我如何承诺本地XHR?
- 如何在iframe上设置“x帧选项”?
- js比较数组
- AngularJS路由不带散列“#”
- Node.js创建文件夹或使用现有的
- 使用src动态添加脚本标签，可能包括document.write
- 单击表单中的按钮会刷新页面
- 如何创建一个jQuery函数(一个新的jQuery方法或插件)?
