title: Filtering value in textarea in 'input' event
body: <p>What I want is filtering user's input. Remove newline and limit its length.</p>
  <p>I tried two methods.</p>
  <p><a href="https://jsfiddle.net/mj111/356yx1df/3/" rel="nofollow noreferrer">https://jsfiddle.net/mj111/356yx1df/3/</a></p>
  <p>html</p>
  <pre><code>&lt;div&gt;
  &lt;textarea id=&quot;text1&quot; placeholder=&quot;write down&quot;&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
  &lt;textarea id=&quot;text2&quot; placeholder=&quot;write down&quot;&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  </code></pre>
  <p>script</p>
  <pre><code>document.getElementById('text1')
  .addEventListener('input', function (evt) {
   evt.preventDefault(); // prevent value change
   
   const msg = evt.target.value.replace(/\n/g, '')
   if (msg.length &lt;= 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
  })
  </code></pre>
  <p>First one is not working, because <code>preventDefault</code> is not working. As MDN doc <a href="https://developer.mozilla.org/en-US/docs/Web/Events/input" rel="nofollow noreferrer">says</a>. 'input' event is not cancelable.</p>
  <p>So, I tried second method; just overwrite textarea value.</p>
  <p>I think there's a better way to do this. If anyone has a good idea, please answer.</p>