Keyboard Delimiter

jQuery plugin to delimit possible characters that can be writing in inputs.

Download on GitHub

What is Keyboard Delimiter?


Keyboard Delimiter it's a powerfull jQuery plugin that remove the possibility of pressing any key or group of keys in the keyboard. Only is possible if this keys are defined previously by options.

You can use this plugin to delimite the writing, for example:

  • Only numbers.
  • Numbers with signs.
  • Text without numbers.
  • Common keys as Back, Space, Suppress, etc.
  • Prevent copy/paste

Let's go to see some examples


1st Example

In this example, you can write or paste only numbers (0-9) and press back space key.

<html>

<input id="i1" type="text" class="only-numbers"/>

<js>

$(document).ready(function() {
  $(".only-numbers").delimit({
    numbers: true,
    backSpace: true
  });
});

2nd Example

Here, you can write only letters (with accents), dot, comma and press space key in a textarea control.

<html>

<textarea id="i1" class="only-ldc"></textarea>

<js>

$(document).ready(function() {
  $(".only-ldc").delimit({
    letters: true,
    accents: true,
    dot: true,
    comma: true
  });
});

3rd Example

Try to write here! You can only write exclamations, brakets, quotes and semicolon.

<html>

<input id="i1" type="text" class="only-ebqs"/>

<js>

$(document).ready(function() {
  $(".only-ebqs").delimit({
    exclamations: true,
    brakets: true,
    quotes: true,
    semicolon: true
  });
});

4th example

Here, only letters (without accents), at sign and dot (like a email)

<html>

<input id="i1" type="text" class="only-lad"/>

<js>

$(document).ready(function() {
  $(".only-lad").delimit({
    letters: true,
    at: true,
    dot: true
  });
});

Browser support


  • Firefox
  • IE
  • Chrome
  • Safari
  • Opera

Not supported on


  • Android
Why not is supported?

Android devices have a bug that not allow to capture pressed keys in the devices, more info here and here.

Installation


Include Keyboard delimiter & jquery to your Site

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery-keyboard-delimiter.min.js"></script>

Add a input type text or textarea input on your html document

<input type="text" id="onumber" placeholder="Write here.." >

And then, add a similar code in your site:

<script type="text/javascript">
  $(document).ready(function(){
    $("#onumber").delimit({
      numbers: true
    });
  });
</script>

You need know more?

See how to works completely in GitHub