การจำกัดจำนวนตัวอักษร ใน textarea ด้วย jquery

Javascript Code

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
	var max_length=15; // กำหนดจำนวนตัวอักษร
	$("#data").keyup(function(){ // เมื่อ textarea id เท่ากับ data  มี event keyup
			var this_length=max_length-$(this).val().length; // หาจำนวนตัวอักษรที่เหลือ
			if(this_length<0){
				$(this).val($(this).val().substr(0,15)); // แสดงตามจำนวนตัวอักษรที่กำหนด
			}else{
				$("#now_length").html(this_length+" ตัวอักษร"); 
              // แสดงตัวอักษรที่เหลือ			
			}			
	});
});
</script>

HTML Code

<form id="form1" name="form1" method="post" action="">
  <p>
    <textarea name="data" cols="35" rows="4" id="data"></textarea>
 <span id="now_length"></span>	
 </p>

  <p>   
    <input type="submit" name="Submit" value="Submit" />
  </p>
</form>

ตัวอย่างผลลัพธ์


บทความในหมวดที่่น่าสนใจ อื่นๆ jQuery Learning

16 Nov 08 jQuery กับการจำกัดการเลือก checkbox อ่าน 1543 26 Feb 09 การกำหนดให้ input text เลื่อนโฟกัส focus เองอัตโนมัติ ด้วย jQuery อ่าน 1535 26 Mar 09 แสดงข้อความบนรูปภาพพื้นหลังสีจางด้วย CSS และ jQuery อ่าน 1522 17 Aug 09 สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย อ่าน 1505 22 Nov 08 ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย อ่าน 1483 25 Sep 08 ตัวอย่างการใช้งานฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 1456 25 Sep 08 jquery สคริปแรกของคุณ อ่าน 1451 25 Sep 08 ซ่อนและแสดง เนื้อหาด้วย jquery แบบ Basic อ่าน 1445 02 Apr 09 สร้างรายการตัวเลือกให้กับ input text ด้วย jQuery อย่างง่าย อ่าน 1439 19 Feb 09 สร้างกล่อง alert ข้อความเฉพาะตัว ด้วย jQuery และ CSS อย่างง่าย อ่าน 1398 15 Feb 09 สร้างเมนู Accordion อย่างง่ายแบบที่ 2 ด้วย jQuery อ่าน 1339 04 Feb 09 แก้ไขข้อความแบบทันที ด้วย jQuery อ่าน 1307 25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 3 อ่าน 1302 25 Sep 08 การกำหนด Selectors ด้วย jquery แบบ Basic อ่าน 1268 25 Sep 08 Event ของ jquery แบบ Basic อ่าน 1268
จำนวนผู้เยี่ยมชม 88073 คน 2010 © Copyright ninenik.com. All rights reserved.