title: How to restrict set of allowed characters in input element?
body: <p>I know that this question has been asked before, but all solutions that I've seen here had some limitations.</p>
  
  <p>What I'm trying to achieve: I have an input field that should allow entering or pasting only alphanumeric characters, and total length must not exceed N characters. It should work in mobile browsers.</p>
  
  <p>What I have tried so far:</p>
  
  <ol>
  <li><em>input</em> event. Triggered only when the focus is lost.</li>
  <li><em>onkeypress</em> event (<code>return this.value.length &lt; 8 &amp;&amp; (event.keyCode &gt;= 65 &amp;&amp; event.keyCode &lt;= 90 || event.keyCode &gt;= 97 &amp;&amp; event.keyCode &lt;= 122 || event.keyCode &gt;= 48 &amp;&amp; event.keyCode &lt;= 57)</code>). Doesn't affect pasting and for some strange reason doesn't work at all in Chrome on Android.</li>
  <li><em>pattern</em> attribute. Works fine, but doesn't validate anything "on the fly" - all validation happens when the form is submitted.</li>
  </ol>
  
  <p>As far as I know, it is a typical task (CVV codes / card numbers on payment forms, order numbers in e-commerce, etc.), but all solutions have some drawbacks. Seems that I am missing something. Please help.</p>