This is a place for me to document how I do this techno magician stuphs...

LimitKeypress Jquery Plugin

What Does It Do?

This is a jquery plugin I wrote to invisably validate a text input field on keypress with a regular expression. Under the conditions that:

• Allow any regular expression
• Validation independant of cursor location - if a number has been entered and the cursor is moved to the beginning the user may enter a negative symbol (if a negative # is valid)
• No flash of invalid characters on keypress
• Allow backspace, enter, and other non character keypress events
• A selection is not replaced with an invalid keypress - note: paste will replace any selection
• Must allow paste and auto complete - Invalid characters from pasted content are removed when the focus changes or a key is pressed - there unfortunately will be a display of invalid data because there is currently no cross browser support for a javaScript paste event i have not yet updated this

By default it uses /^[-+]?\d*\.?\d*$/ as the regular expression so that only positive or negative decimal numbers are allowed. The only reason for this being the default is because it is the format that I first wanted when I wrote the plugin.

This only validates if javascript is enabled. Remember to validate your data on the server side as well. Note: this plugin does not validate for null values.

Demo

Any positive or negative floating point #:

Any positive floating point #:

Any positive integer #:

Any word or name w/o numbers:

Implementation

include in the head of your HTML document after jquery:

<script type="text/javascript" src="/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/jquery.limitkeypress.js"></script>

HTML quite standard really... :

<form id="limitkeypress-demo" action="">
  <div class="input-stuphs">
    <p>Any positive or negative floating point #: <input id="input01" class="input-default" size="20" type="text"></p>
    <p>Any positive floating point #: <input id="input02" class="input-pos-float" size="20" type="text"></p>
    <p>Any positive integer #: <input id="input03" class="input-pos-int" size="20" type="text"></p>
    <p>Any First Name: <input id="input04" class="input-name" size="20" type="text"></p>
  </div>
</form>

Add to your JavaScript:

$(document).ready(function() {
  $(".input-default").limitkeypress();
  $(".input-pos-float").limitkeypress({ rexp: /^[+]?\d*\.?\d*$/ }); 
  $(".input-pos-int").limitkeypress({ rexp: /^[+]?\d*$/ }); 
  $(".input-name").limitkeypress({ rexp: /^[A-Za-z]*$/ }); 
});

Download

File Name	Size	Date Modified
jquery.limitkeypress.js	4.57 KB	06/20/2016 16:45:05
jquery.limitkeypress.min.js	2.23 KB	06/20/2016 16:43:33
jquery.limitkeypress.old.js	4.3 KB	09/29/2010 11:18:00
jquery.limitkeypress.old.min.js	2.45 KB	09/29/2010 11:18:00

Update!

• Looks like there is now a JavaScript
• Resolved an issue with IE9+ not working before focus change

IE9+ added javaScript support for selectionStart and selectionEnd; and IE11 killed document.selection & sort of kept document.setSelectionRange

How It Works

It inverses the polarity of the neutron flow.

Credits

I was introduced to jQuery from http://coredogs.com

I coppied a function to set a selection from http://www.codingforums.com/archive/index.php/t-90176.html

Feedback

This is emailWare if you use/like this please send me your questions or comments to brian@brianjaeger.com.