'入力'イベントのテキストエリアの値をフィルタリングする

Question

私はユーザーの入力をフィルタリングします。改行を削除し、その長さを制限する。

2つの方法を試しました。

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 saysとして。 'input'イベントは取り消しできません。

ですから、2番目の方法を試しました。テキストエリアの値を上書きするだけです。

私はこれを行うより良い方法があると思います。誰かが良いアイデアを持っているなら、答えてください。

Answer 1

長さを制限するにはkeyupイベントを使用するか、属性としてHTMLにmaxlengthを手動で追加することができます。動的に設定する場合は、Element.setAttributeを使用できます。改行を防ぐために、シフトされていない限り、リターンキーを防ぐことができます。置き換えを使用して置き換える必要があると思われるものを置き換えることができます。正規表現は最も効果的に作業を完了します。

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>