اعتبار سنجی کنترل TextBox با استفاده از رویداد OnKeyPress در JavaScript
دوشنبه 10 فروردین 1394در این مقاله قصد داریم نحوه ایجاد اعتبارسنجی کنترل 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 نباشد و در آخر اگر تمام مقادیر وارد شده مجاز بود اجازه اجرا می دهد .
- ASP.net
- 2k بازدید
- 3 تشکر