Devdit
 

jQuery ดึงข้อมูลตอนที่ผู้ใช้งานพิมพ์ ทำอย่างไร

733

สอนเขียน jQuery ดึงข้อมูลตอนที่ผู้ใช้งานพิมพ์ โดยใช้ event keyup ซึ่งเป็นคำสั่งเหตุการณ์เมื่อผู้ใช้งานกดพิมพ์ และปล่อยปุ่ม โปรแกรมจะเข้าไปทำงานในฟังก์ชันตามที่กำหนด พร้อมแสดงผลลัพธ์ออกสู่หน้าเว็บไซต์ สามารถเขียนโปรแกรมได้ดังนี้

 

ตัวอย่าง jQuery ดึงข้อมูลตอนที่ผู้ใช้งานพิมพ์ ทำอย่างไร

<input type="text" id="txt" placeholder="กรุณากรอกชื่อ">
<div id="result" style="margin-top: .2rem"></div>
<script>
   $("#txt").keyup(function(){
       let v = $(this).val();
       $("#result").html( "สวัสดีคุณ "+v );
   });
</script>

คำอธิบาย

jQuery ดึงข้อมูลตอนที่ผู้ใช้งานพิมพ์ เมื่อเกิดการพิมพ์ข้อมูลใดๆ ลงใน input text id=txt จะเกิดเหตุการณ์ keyup เกิดขึ้น จากนั้นใช้คำสั่ง $(this).val() เพื่อดึงค่าจาก TextBox ออกมาเก็บไว้ที่ตัวแปร v และแสดงค่าที่พิมพ์ออกสู่หน้าจอผ่าน div id=result แบบ RealTime

แก้ไข 2 ปีที่แล้ว
ชอบ
ลิ้งก์
แชร์
Devdit มีช่อง YouTube แล้ว
เราสร้างวิดีโอเกี่ยวกับเทคโนโลยี ทำตามง่ายๆ