วันพฤหัสบดีที่ 25 พฤศจิกายน พ.ศ. 2553

javascript only number ควบคุมให้ป้อนข้อมูลได้เฉพาะตัวเลขเท่านั้น

นำเสนอสองวิธีการในการควบคุมครับ วิธีแรก replaceDigit เป็นการแทนค่า string ที่ผู้ใช้ป้อนเข้าไปครับ
วิธีที่สองเป็น appeptOnlyDigit จะยอมรับคำสั่งที่ป้อนมาทาง keyboard เฉพาะตัวเลขและรหัสควบคุมบางตัวเท่านั้นครับ
ทั้งสองวิธียังไม่ได้กันการ copy และ paste นะครับในส่วนนี้ต้องหาทางแก้ไขเพิ่มเติมครับ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="th" xml:lang="th">
<head>
<meta http-equiv="content-type" content="text/html; charset=tis-620" />
<title>javascript only digit textbox</title>
<script type="text/javascript">
//<![CDATA[
function replaceDigit(el){
el.value=el.value.replace(/\D/,'');
}
function acceptOnlyDigit(event,el){
var e=window.event?window.event:event;
var keyCode=e.keyCode?e.keyCode:e.which?e.which:e.charCode;
//0-9 (numpad,keyboard)
if ((keyCode>=96 && keyCode<=105)||(keyCode>=48 && keyCode<=57)){
return true;
}
//backspace,delete,left,right,home,end
if (',8,46,37,39,36,35,'.indexOf(','+keyCode+',')!=-1){
return true;
}
return false;
}
//]]>
</script>
</head>
<body>


<form method="post" action="?" id="box">
<br/>replace digit: <input type="text" name="onlydigit" value="" onkeyup="replaceDigit(this)" />
<br/>accept only digit: <input type="text" name="onlydigit2" value="" onkeydown="return acceptOnlyDigit(event,this)" />
</form>

</body>
</html>

ไม่มีความคิดเห็น:

แสดงความคิดเห็น