Question

我正在尝试在用户输入时逐行验证用户输入到textarea。具体来说，我想删除尾随空格并将每行限制为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"));

});

当用户编辑textarea的最后一行时，它非常有效。但是，当脚本验证另一行时，行光标会突然跳转到最后一行（请参阅working jsfiddle example）。

有没有办法阻止光标跳跃？我是否需要以不同的方式验证行，或者是否有一种方法可以记住行光标所在的位置然后将其放回去？

Answer 1

 $("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 link。

希望这有帮助。

在用户输入时修剪并编辑每行textarea

1 个答案: