Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

รันสคริปต์เมื่อองค์ประกอบได้รับอินพุตจากผู้ใช้ใน HTML

ใช้แอตทริบิวต์เหตุการณ์ oninput เพื่อทริกเกอร์เมื่อองค์ประกอบได้รับอินพุตจากผู้ใช้ คุณสามารถลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ oninput:

ตัวอย่าง

<!DOCTYPE html> 
<html> 
  <body> 
    <p>เขียนชื่อของคุณด้านล่าง:</p> 
    <input type="text" id="myid" oninput="display()"> 
    <p id="test"></p> 
    <script> 
      function display() { 
        var p = document.getElementById("myid").value; 
        document.getElementById("test").innerHTML = "คำตอบของคุณคือ " + p; 
      } 
    </script> 
  </body> 
</html>

ความแตกต่าง oninput vs onchange:

เหตุการณ์ ทำงานเมื่อ
oninput ทุกครั้งที่ค่าเปลี่ยน (พิมพ์, ลบ, วาง, เลือกจาก autocomplete)
onchange เมื่อค่าเปลี่ยน และ องค์ประกอบสูญเสียโฟกัส (blur)

oninput เหมาะสำหรับ live preview, real-time validation, character counter