在文本区域中按Enter键不能正确更改光标索引

编程问答 2022-06-11

问题描述

在javascript中，我们可以使用文本输入元素的element.selectionStart或element.seletionEnd属性获取textarea元素中光标的“索引”。因此，在第0行（第一行）上时，40列10行的文本区域的光标位置应为0-40。但是，当您按Enter键时，将光标移至文本输入元素中的下一行时，光标位置不会相应更新。实际上，按Enter键仅具有向文本区域添加单个空格的效果，因此使光标位置比按Enter键之前的位置高1+。为什么会这样，并且有办法达到将光标位置更新到下一行的预期效果吗？

我提供了以下代码段，以更好地解释我在说什么。

var input = document.getElementById("PMCDefMsgtxt");

input.addEventListener("keyup",function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    event.preventDefault();
    // should log to the console the cursor position
    console.log(input.selectionEnd);
  }
});
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <textarea rows="10" cols="40" class="fwMultilineTextbox" id="PMCDefMsgtxt" name="PMCDefMsgtxt"
  style="width: 550px; height: 125px; margin-left: auto;"></textarea>
</body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptreactjsreactjstextarea