3 ways Jquery limits text boxes to alphanumeric types
- 2020-03-30 04:26:23
- OfStack
OnlyNum (), onlyAlpha(), and onlyNumAlpha() are 3 Jquery extension methods
Number. Js
// ----------------------------------------------------------------------
// <summary>
//Limit the number to
// </summary>
// ----------------------------------------------------------------------
$.fn.onlyNum = function () {
$(this).keypress(function (event) {
var eventObj = event || e;
var keyCode = eventObj.keyCode || eventObj.which;
if ((keyCode >= 48 && keyCode <= 57))
return true;
else
return false;
}).focus(function () {
//Disable the input method
this.style.imeMode = 'disabled';
}).bind("paste", function () {
//Gets the contents of the clipboard
var clipboard = window.clipboardData.getData("Text");
if (/^d+$/.test(clipboard))
return true;
else
return false;
});
};
Letter. Js
// ----------------------------------------------------------------------
// <summary>
//Limit the input to
// </summary>
// ----------------------------------------------------------------------
$.fn.onlyAlpha = function () {
$(this).keypress(function (event) {
var eventObj = event || e;
var keyCode = eventObj.keyCode || eventObj.which;
if ((keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122))
return true;
else
return false;
}).focus(function () {
this.style.imeMode = 'disabled';
}).bind("paste", function () {
var clipboard = window.clipboardData.getData("Text");
if (/^[a-zA-Z]+$/.test(clipboard))
return true;
else
return false;
});
};
Number_letter. Js
// ----------------------------------------------------------------------
// <summary>
//Limit input to Numbers and letters
// </summary>
// ----------------------------------------------------------------------
$.fn.onlyNumAlpha = function () {
$(this).keypress(function (event) {
var eventObj = event || e;
var keyCode = eventObj.keyCode || eventObj.which;
if ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122))
return true;
else
return false;
}).focus(function () {
this.style.imeMode = 'disabled';
}).bind("paste", function () {
var clipboard = window.clipboardData.getData("Text");
if (/^(d|[a-zA-Z])+$/.test(clipboard))
return true;
else
return false;
});
};
Use. Js
$(function () {
//Controls that use the onlyNum class style are limited to entering Numbers
$(".onlyNum").onlyNum();
//Controls that use the onlyAlpha class style are restricted to typing the letter
$(".onlyAlpha").onlyAlpha();
//Controls that use the onlyNumAlpha class style are restricted to entering Numbers and letters
$(".onlyNumAlpha").onlyNumAlpha();
The above methods can achieve the project requirements, we according to their own specific needs free choice