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


Related articles: