اعتبار سنجی کنترل TextBox با استفاده از رویداد OnKeyPress در JavaScript

در این مقاله قصد داریم نحوه ایجاد اعتبارسنجی کنترل TextBox با استفاده رویداد OnKeyPress را در JavaScript توضیح دهیم , به نحوی که کاربر فقط بتواند عدد وارد نماید .

اعتبار سنجی کنترل TextBox با استفاده از رویداد OnKeyPress در JavaScript

برای اعتبار سنجی و محدود کردن کاربر برای وارد کردن مقادیر در کنترل TextBox ابتدا تگ های زیر را به صفحه اضافه میکنیم :


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-size: 9pt;
            font-family: Arial;
        }
    </style>
</head>
<body>
    Numeric Value: <input type="text" id="text1" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" />
    <span id="error" style="color: Red; display: none">* Input digits (0 - 9)</span>
    <script type="text/javascript">
        var specialKeys = new Array();
        specialKeys.push(8); //Backspace
        function IsNumeric(e) {
            var keyCode = e.which ? e.which : e.keyCode
            var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
            document.getElementById("error").style.display = ret ? "none" : "inline";
            return ret;
        }
    </script>
</body>
</html>

در تگ بالا ما یک کنترل TextBox به صفحه اضافه کرده ایم و از سه event handler استفاده کرده ایم :

1-OnKeyPress

2-OnDrop

3-OnPaste

برای رویداد OnKeyPress تابع IsNumeric  را در جاوا اسکریپت فرا خوانی کرده ایم .این تابع در ابتدا کد اسکی صفحه کلید را تشخیص میدهد , سپس تایید می کند که کد اسکی صفحه کلید باید بین 48 تا 57 باشد .همچنین بررسی میکند که مقدار وارد شده توسط کاربر یک کارکتر خاص مانند BackSpace یا Delete نباشد و در آخر اگر تمام مقادیر وارد شده مجاز بود اجازه اجرا می دهد .

 

فایل های ضمیمه