Characters Restriction using javascript

Submitted by: 
Language: 
Visitors have accessed this post 407 times.

In this project we are going to learn on how to disable characters in input field using javascript. The only allowed characters in this project are "01234567890.". If you want to enable or change some characters find this code // var validList = "0123456789."; for character restriction.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Input Characters Restriction</title>
  5. <style>
  6. input{padding:5px; border:1px solid #888;}
  7. </style>
  8. </head>
  9. <body>
  10. <script>
  11. // Retrieve last key pressed. Works in IE and Netscape.
  12. // Returns the numeric key code for the key pressed.
  13. function getKey(e)
  14. {
  15. if (window.event)
  16. return window.event.keyCode;
  17. else if (e)
  18. return e.which;
  19. else
  20. return null;
  21. }
  22. function restrictChars(e, obj)
  23. {
  24. var CHAR_AFTER_DP = 2; // decimal places
  25. var validList = "0123456789."; // allowed characters
  26. var key, keyChar;
  27. key = getKey(e);
  28. if (key == null) return true;
  29. // control keys
  30. // null, backspace, tab, carriage return, escape
  31. if ( key==0 || key==8 || key==9 || key==13 || key==27 )
  32. return true;
  33. // get character
  34. keyChar = String.fromCharCode(key);
  35. // check valid characters
  36. if (validList.indexOf(keyChar) != -1)
  37. {
  38. // check for existing decimal point
  39. var dp = 0;
  40. if( (dp = obj.value.indexOf( ".")) > -1)
  41. {
  42. if( keyChar == ".")
  43. return false; // only one allowed decimal point
  44. else
  45. {
  46. // room for more after decimal point?
  47. if( obj.value.length - dp <= CHAR_AFTER_DP)
  48. return true;
  49. }
  50. }
  51. else return true;
  52. }
  53. // not a valid character
  54. return false;
  55. }
  56. </script>
  57. <h3>Characters Restriction</h3>
  58. Allowed Characters: <b>"0123456789."</b>
  59. <input type="text" onKeyPress="return restrictChars(event, this)">
  60. </body>
  61. </html>

Hope you find this useful.


Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.