Allow only two types of characters to be inserted into an input field

Question

I have a text field where I need only 1 and 0 anything else will break my logic code.

How do i possibly restrict any other character from being entered in an input field?

I looked through posts regarding on a somewhat similar subject but they allowed numbers from 0-9 and so on. I tried using the pattern attribute in html but there is no pattern that does this, at least i haven't found it.

I have found this code:

$(function(){
              $('#BinaryInputArea').bind('input', function(){
                $(this).val(function(_, v){
                 return v.replace(/\s+/g, '');
                });
              });
            });

which restricts SPACES from being entered, this uses again patterns that only seem to be known by veterans. I tried adding [2-9] in the .replace section but sadly it was out of the bounds of my logic.

EDIT: I am using a TextArea for input so a regular input pattern:[0-1] wont work

Answer 1

You can do this with regular expressions:

var txtInput = document.getElementById("txtInput");

txtInput.addEventListener("keydown", function(evt){
  var regEx = /^(0|1)$/;
  
  // Account for two ways to press 0 and 1 on full-size keyboards
  var key1 = String.fromCharCode(evt.keyCode);
  var key2 = String.fromCharCode(evt.keyCode-48); // Adjustment for the keydown event

  // Test key against regular expression
  if(!regEx.test(key1) && !regEx.test(key2)){
    evt.preventDefault();
  }
});

<form>
  <textarea id="txtInput"></textarea>
  <button>Submit</button>
</form>

Or, you can do this by checking for specific keys being pressed:

var input = document.getElementById("txtInput");

// Do event binding in JavaScript, not in HTML
input.addEventListener("keydown", function(evt){

  // Get the code for the key that was pressed
  var char = evt.keyCode;

  // Is the SHIFT key being held down?
  if(evt.shiftKey){
    // If so, cancel the event
    evt.preventDefault();
  } else {
    // Not the SHIFT key, but if it is 48, 49, 96, 97 
    // (the four ways to get 0 or 1 on a keyboard with a num pad)
    switch (char) {
      case 48:
      case 49:
      case 96:
      case 97:
        break;  // do nothing
      default:
        // Some other key, cancel the event.
        evt.preventDefault();  
        break;
    }
  }
});

// Don't allow pasting into the field
input.addEventListener("paste", function(evt){
  evt.preventDefault();
});

<form>
  <textarea id="txtInput"></textarea>
  <button>Submit</button>
</form>

Answer 2

If you want to do it using javascript you can do something like:

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 49'>
</input>

EDIT: Ok, my first post just pretended to give an example of how it could be done on a line. But you need to have into account a lot of details like allowing the user to use the keyboard keys, copy and paste events, delete characters, etc. You should also control if the user paste a non-valid value.

So here is a more detailed example:

In one line:

<input name="number" onkeyup="if (/[^0-1]|^0+(?!$)/g.test(this.value)) this.value = this.value.replace(/[^0-1]|^0+(?!$)/g,'')">

A jquery example:

$(document).ready(function() {
  $('input.validateBinary').keyup(function(event) {
    var regEx = /^(0|1)$/;
    if (!regEx.test(this.value)) {
      this.value = this.value.replace(/[^0-1]|^0+(?!$)/g, '');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" class="validateBinary" />