เทคนิคการทำให้ Textbox รับค่าได้เฉพาะตัวเลข จัดทำโดย : Mr.GuruZ
 Un title page   เทคนิคการทำให้ Textbox รับค่าได้เฉพาะตัวเลข เทคนิคนี้เราจะใช้ Java เป็นตัวกำหนดใช้ในการสร้าง Form ต่างๆ

ขั้นตอนการทำ
1. ให้เราสร้าง Form ขึ้นมา ดังภาพ


โค้ด Java ที่ใช้

<SCRIPT language=JavaScript>
function check_number() {
e_k=event.keyCode
//if (((e_k < 48) || (e_k > 57)) && e_k != 46 ) {
if (e_k != 13 && (e_k < 48) || (e_k > 57)) {
event.returnValue = false;
alert("ต้องเป็นตัวเลขเท่านั้น... \nกรุณาตรวจสอบข้อมูลของท่านอีกครั้ง...");
}
}

</script>


2. หลังจากนั้นให้เรานำโค้ด Java ไปวางไว้ส่วน Head ของไฟล์


3. หลังจากนั้นเขียนโค้ดที่ Textbox ให้ดึง Function จาก Java เมื่อผู้ใช้ป้อนค่า

<input type="text" name="textfield" onkeypress=check_number();> //การเรียกใช้ Function

4. โค้ดสร้าง Form ทั้งหมด

<html>
<head>
<title>Un title page</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<style type="text/css">
<!--
body { margin: 0px 0px; padding: 0px 0px}
a:link { color: #005CA2; text-decoration: none}
a:visited { color: #005CA2; text-decoration: none}
a:active { color: #0099FF; text-decoration: underline}
a:hover { color: #0099FF; text-decoration: underline}
-->
</style>
<SCRIPT language=JavaScript>
function check_number() {
e_k=event.keyCode
//if (((e_k < 48) || (e_k > 57)) && e_k != 46 ) {
if (e_k != 13 && (e_k < 48) || (e_k > 57)) {
event.returnValue = false;
alert("ต้องเป็นตัวเลขเท่านั้น... \nกรุณาตรวจสอบข้อมูลของท่านอีกครั้ง...");
}
}

</script>
</head>

<body bgcolor="#FFFFFF">
<form name="form1" method="post" action="">
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td>ราคาสินค้าที่ขาย
<input type="text" name="textfield" onkeypress=check_number();>
<input type="submit" name="Submit" value="ตกลง">
</td>
</tr>
</table>
</form>
</body>
</html>


5. หลังจากนั้นลองทดสอบดูครับ


6. ขอให้สนุกกับการเขียนเว็บ

คุณอาจสนใจ
การเขียนคำสั่ง PHP ร่วมกับ Java Script
Mr.GuruZ (71,868 - 31 ก.ค. 49)
การแปลงฐานข้อมูลจาก Access มาใส่ใน MySQL
Mr.GuruZ (42,967 - 03 มิ.ย. 49)
การใช้งาน Drop-down menu จัดระเบียบหน้าเว็บไซต์
Mr.GuruZ (26,974 - 21 มี.ค. 51)
เว็บลามก...ป่วนแก้ไง
เว็บไทยดีดี (15,415 - 29 ก.ย. 50)
เช็คพื้นที่ว่างบนโอส
Zerohate (25,961 - 27 พ.ย. 50)
Error Code คืออะไร
เว็บไทยดีดี (24,212 - 29 ก.ย. 50)
โปรแกรม SleepyTypeTool_v1.3.1.�แก้สระลอยใน Photoshop
Black-Hawk (58,350 - 27 ก.พ. 51)
การเปลี่ยนสีวัตถุ
Mr.GuruZ (51,291 - 04 มิ.ย. 49)