Question

我想要的是过滤用户的输入。删除换行符并限制其长度。

我尝试了两种方法。

HTML

<div>
<textarea id="text1" placeholder="write down"></textarea>
</div>

<div>
<textarea id="text2" placeholder="write down"></textarea>
</div>

脚本

document.getElementById('text1')
.addEventListener('input', function (evt) {
 evt.preventDefault(); // prevent value change

 const msg = evt.target.value.replace(/\n/g, '')
 if (msg.length <= 10) {
   document.getElementById('text1').value = msg
 }
})

document.getElementById('text2')
.addEventListener('input', function (evt) {
 const msg = evt.target.value.replace(/\n/g, '').slice(0, 10)
 document.getElementById('text2').value = msg
})

第一个不起作用。因为preventDefault不起作用。作为mdn doc says。 'input'事件不可取消。

所以，我尝试了第二种方法。只是覆盖textarea值。

我认为有更好的方法可以做到这一点。如果有人有好主意，请回答。

Answer 1

使用keyup事件来限制长度，或者您可以手动将maxlength作为属性添加到HTML中。如果要动态设置它，可以使用Element.setAttribute。为防止新行，您可以阻止返回键，只要它不是移位。您仍然可以使用替换来替换您需要替换的内容，正则表达式将最有效地完成工作。

＆＃13;

var text = document.getElementsByTagName('textarea');
var text1 = text[0];
var text2 = text[1];

text1.addEventListener('keydown', function(event) {
  let val = event.target.value;
  let limit = 25;
  // limit the value once you reach a particular length
  if (val.length > 3) {
    event.target.value = val.substr(0, limit)
  };
  // prevent new line by preventing enter key press
  if (event.keyCode === 13 && !event.shiftKey) {
    event.preventDefault();
    alert('no new lines please');
    return false;
  }
  // and you can filter with replace
   


})

＆＃13;

<div>
  <textarea id="text1" placeholder="write down"></textarea>
</div>

<div>
  <textarea id="text2" placeholder="write down"></textarea>
</div>

＆＃13;

在'input'事件中过滤textarea中的值

1 个答案: