title: How to prevent invalid characters from being typed into input fields
body: <p><code>Onkeydown</code>, I run the following JavaScript:</p>
  
  <pre><code>function ThisOnKeyDown(el) {
     if (el.title == 'textonly') {
         !(/^[A-Za-zÑñ-\s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ-\s]/ig, '') : null;
     }
     if (el.title == 'numbersonly') {
         !(/^[0-9]*$/i).test(el.value) ? el.value = el.value.replace(/[^0-9]/ig, '') : null;
     }
     if (el.title == 'textandnumbers') {
         !(/^[A-Za-zÑñ0-9-\s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ0-9-\s]/ig, '') : null;
     }
  }
  </code></pre>
  
  <p>One of these three title attributes is given to various input fields on the page. The code works so far as invalid characters are correctly erased, but not until the next character is entered. I want to find a way to simply deny the invalid input in the first place. I appreciate your help!</p>
  
  <p><strong>Edit</strong>: I create the events globally. Here's how I do that:</p>
  
  <pre><code>      function Globalization() {
        var inputs = document.getElementsByTagName('input');
        for (i = 0; i &lt; inputs.length; i++) {
            inputs[i].onfocus = createEventHandler(
                ThisOnFocus, inputs[i]);
            inputs[i].onblur = createEventHandler(
                ThisOnBlur, inputs[i]);
            inputs[i].onkeydown = createEventHandler(
                ThisOnKeyDown, inputs[i]);
            inputs[i].onkeyup = createEventHandler(
                ThisOnKeyUp, inputs[i]);
        }
    }
  </code></pre>
  
  <p><code>Globalization()</code> is run <code>body.onload</code></p>
  
  <p>Therefore, a typical input field has HTML without function calls like this:</p>
  
  <pre><code>          &lt;input id="AppFirstName" style="width: 150px;" type="text" maxlength="30" title="textonly"/&gt;
  </code></pre>