มาดูโค๊ดกันเลย
ส่วนของ Jquery ใช้คำสั่งดังนี้ครับ
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function lenText(ele, len,show_count_area) {
var strlen = ele.val().length;
var w = ''; for (var i = 0; i < len; i++) {var x = ele.val().charAt(i); w += x; }
var result_char=(len*1)-(strlen*1);
if(result_char>=0){ $('.'+show_count_area).html(result_char);}
ele.val(w);
}
</script>
บรรทัดที่ 1 คือการเรียกใช้ไฟล์ jquery (Javascript Framework)
บรรทัดที่ 2 คือฟังก์ชั่น lenText ทำหน้าที่เช็คจำนวนตัวอักษรในช่อง Input ของเราครับ
เวลาใช้งานฟังก์ชั่นนี้ให้ใช้คำสั่งใน Input Tag ของเราดังนี้
<input name="input1" type="text" id="input1" size="50" onkeyup="lenText($(this), 65,'showctext')"/> <span style="color:green;">(<span class="showctext">65</span>)</span> * ไม่เกิน 65 ตัวอักษร<br />
เราจะให้ฟังก์ชั่น lenText ทำงานเมื่อมีคีย์ข้อมูลเกิดขึ้น คือคำสั่ง onkeyup="lenText($(this), 65,'showctext')"
โดยที่มีพารามิเตอร์ ดังนี้
1.$(this) หมายถึง input ตัวปัจจุบันที่เราคีย์ข้อมูลอยู่ครับ เราสามารถใช้ได้กับ Input หลายตัวได้เลย
2.65 คือ ขนาดตัวอักษรที่จะใช้ตรวจว่าต้องไม่เกิน 65 ตัวอักษร เราสามารถกำหนดขนาดตรงนี้ได้เลย
3.showtext คือ ชิ้อของ Att Class ที่เราจะให้แสดงขนาดตัวอักษรทั้งหมดที่เราได้ใช้ไปครับ ว่าตอนนี้เหลืออยู่เท่าไหร่
โค๊ดทั้งหมด
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ตรวจสอบขนาดตัวอักษรในช่องกรอกข้อมูลด้วย Jquery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function lenText(ele, len,show_count_area) {
var strlen = ele.val().length;
var w = ''; for (var i = 0; i < len; i++) {var x = ele.val().charAt(i); w += x; }
var result_char=(len*1)-(strlen*1);
if(result_char>=0){ $('.'+show_count_area).html(result_char);}
ele.val(w);
}
</script>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:13px;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input name="input1" type="text" id="input1" size="50" onkeyup="lenText($(this), 65,'showctext')"/>
<span style="color:green;">(<span class="showctext">65</span>)</span>
* ไม่เกิน 65 ตัวอักษร<br />
<input type="submit" name="btSave" id="btSave" value="SAVE" />
<input type="reset" name="button2" id="button2" value="Reset" />
</form>
</body>
</html>
ไม่มีความคิดเห็น :
แสดงความคิดเห็น