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

دوشنبه 10 فروردین 1394

در این مقاله قصد داریم نحوه ایجاد اعتبارسنجی کنترل 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 نباشد و در آخر اگر تمام مقادیر وارد شده مجاز بود اجازه اجرا می دهد .

 

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

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید