logo标签列表

JavaScript中如何设置文本框中的光标位置。

javascripthtmltextbox
11

我正在尝试使用以下代码在JavaScript中向textBox添加新行，并使用新行字符更新textBox的值：

ele.value = ele.value + "\n";

ele.focus();

// To update cursor position to recently added character in textBox
ele.setSelectionRange(value.length, value.length);

上述代码更新了文本框的值，但未将光标位置更新到新行。

(尽管当我点击文本框外部并再次点击文本框时，它会更新光标位置，但当用户已经在编辑文本框时不会更新。)

哪个浏览器？我的下面的答案在Chrome中可以正常工作，但在Safari中不行。 - skav
2个回答
13

这应该在Firefox中也能正常工作：

HTML：

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <textarea id="myText" rows="4" cols="50" onkeypress="">The rain in Spain falls mainly on the plains.</textarea>
    <br>
    <button onclick="updateText()">Update</button>
  </body>
</html>

Javascript：

 function updateText(e) {
 var ele = document.getElementById('myText');
 var newVal = 'Old McDonald had a farm.\n';

 ele.value = newVal;
 ele.focus();

 // To update cursor position to recently added character in textBox
 ele.setSelectionRange(newVal.length, newVal.length);
}

JS Bin示例

当我聚焦时，我选择文本。

7

function insertNewlineAndFocus() {
  let textarea = document.getElementById("unicorn");
  textarea.value = textarea.value + "\n";
  textarea.setSelectionRange(textarea.value.length, textarea.value.length);
  textarea.focus();
}
button {
  display: block;
  margin: 10px;
}
textarea {
  min-width: 50%;
  min-height: 100px;
  margin: 10px;
}
<button onclick="insertNewlineAndFocus()">do it!</button>
<textarea id="unicorn">the most phenomenal text, really, its the best</textarea>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接