在'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>