การจำกัดจำนวนตัวอักษร ใน 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 อ่าน 1510 26 Feb 09 การกำหนดให้ input text เลื่อนโฟกัส focus เองอัตโนมัติ ด้วย jQuery อ่าน 1507 26 Mar 09 แสดงข้อความบนรูปภาพพื้นหลังสีจางด้วย CSS และ jQuery อ่าน 1486 17 Aug 09 สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย อ่าน 1453 22 Nov 08 ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย อ่าน 1445 25 Sep 08 ตัวอย่างการใช้งานฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 1417 25 Sep 08 jquery สคริปแรกของคุณ อ่าน 1414 02 Apr 09 สร้างรายการตัวเลือกให้กับ input text ด้วย jQuery อย่างง่าย อ่าน 1405 25 Sep 08 ซ่อนและแสดง เนื้อหาด้วย jquery แบบ Basic อ่าน 1403 19 Feb 09 สร้างกล่อง alert ข้อความเฉพาะตัว ด้วย jQuery และ CSS อย่างง่าย อ่าน 1360 15 Feb 09 สร้างเมนู Accordion อย่างง่ายแบบที่ 2 ด้วย jQuery อ่าน 1293 04 Feb 09 แก้ไขข้อความแบบทันที ด้วย jQuery อ่าน 1274 25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 3 อ่าน 1267 25 Sep 08 การกำหนด Selectors ด้วย jquery แบบ Basic อ่าน 1243 25 Sep 08 Event ของ jquery แบบ Basic อ่าน 1237
จำนวนผู้เยี่ยมชม 85317 คน 2010 © Copyright ninenik.com. All rights reserved.