在用户键入时修剪和编辑文本区域的每一行

Trim and edit each line of textarea while user is typing

本文关键字：一行 区域 文本 用户 修剪 编辑      更新时间：2023-09-26

我正在尝试在用户键入文本区域时逐行验证用户输入的文本区域。具体来说，我想删除尾随空格并将每行限制为 10 个字符。

目前，我使用以下jQuery代码：

$("textarea").on('input',function(){
    var trimmedInput = $.map($(this).val().split("'n"), function(line){
        return $.trim(line).substring(0,10);
    });
    $("textarea").val(trimmedInput.join("'n"));
});

当用户编辑文本区域的最后一行时，它可以完美运行。但是，当脚本验证另一行时，行光标会突然跳到最后一行（请参阅工作 jsfiddle 示例）。

有没有办法防止光标跳跃？我是否需要以不同的方式验证行，或者有没有办法 jQuery 记住行光标的位置，然后将其放回原处？

 $("textarea").on('input',function(){
    var currentPosition = this.selectionStart;
    var trimmedInput = $.map($(this).val().split("'n"), function(line){
        return $.trim(line).substring(0,10);
    });
    $("textarea").val(trimmedInput.join("'n"));
     setSelectionRange(this, currentPosition, currentPosition);
});
function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

检查工作正常的 jsfiddle 链接。

希望这有帮助。

相关文章：