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

Question

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

我尝试了两种方法。

https://jsfiddle.net/mj111/356yx1df/3/

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 所说 。 “输入”事件不可取消。

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

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

Answer 1

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

 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 }) 

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