html <input type =“ text” /> เหตุการณ์ onchange ไม่ทำงาน

ฉันกำลังพยายามทำการทดลองบางอย่าง สิ่งที่ฉันต้องการให้เกิดขึ้นคือทุกครั้งที่ผู้ใช้พิมพ์บางอย่างในกล่องข้อความสิ่งนั้นจะปรากฏในกล่องโต้ตอบ ฉันใช้onchangeคุณสมบัติเหตุการณ์เพื่อทำให้มันเกิดขึ้น แต่ไม่ได้ผล ฉันยังคงต้องกดปุ่มส่งเพื่อให้มันใช้งานได้ ฉันอ่านเกี่ยวกับ AJAX และฉันคิดจะเรียนรู้เกี่ยวกับเรื่องนี้ ฉันยังต้องการ AJAX เพื่อให้มันใช้งานได้หรือ JavaScript แบบธรรมดาเพียงพอหรือไม่ กรุณาช่วย.

index.php

<script type="text/javascript" src="javascript.js"> </script>

<form action="index.php" method="get">
 Integer 1: <input type="text" id="num1" name="num1" onchange="checkInput('num1');" /> <br />
 Integer 2: <input type="text" id="num2" name="num2" onchange="checkInput('num2');" /> <br />
 <input type="submit" value="Compute" />
</form>

javascript.js

function checkInput(textbox) {
 var textInput = document.getElementById(textbox).value;

 alert(textInput); 
}

onchangeจะถูกทริกเกอร์เมื่อการควบคุมเบลอเท่านั้น ลองonkeypressแทน

ใช้.on('input'...เพื่อตรวจสอบทุกการเปลี่ยนแปลงอินพุต (วางคีย์อัพ ฯลฯ ) จาก jQuery 1.7 ขึ้นไป

สำหรับอินพุตแบบคงที่และแบบไดนามิก:

$(document).on('input', '.my-class', function(){
    alert('Input changed');
});

สำหรับอินพุตแบบคงที่เท่านั้น:

$('.my-class').on('input', function(){
    alert('Input changed');
});

JSFiddle พร้อมตัวอย่างแบบคงที่ / ไดนามิก: https://jsfiddle.net/op0zqrgy/7/

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

น่าเศร้าที่ไม่มีเหตุการณ์ "onchange" ที่รายงานการเปลี่ยนแปลงทันทีอย่างน้อยที่สุดเท่าที่ฉันรู้ แต่มีวิธีแก้ปัญหาที่ใช้ได้กับทุกกรณี: ตั้งค่าเหตุการณ์เวลาโดยใช้ setInterval ()

สมมติว่าช่องป้อนข้อมูลของคุณมีรหัสและชื่อ "เมือง":

<input type="text" name="city" id="city" />

มีตัวแปรส่วนกลางชื่อ "เมือง":

var city = "";

เพิ่มสิ่งนี้ในการเริ่มต้นเพจของคุณ:

setInterval(lookForCityChange, 100);

จากนั้นกำหนดฟังก์ชัน lookForCityChange ():

function lookForCityChange()
{
    var newCity = document.getElementById("city").value;
    if (newCity != city) {
        city = newCity;
        doSomething(city);     // do whatever you need to do
    }
}

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

หากความคิดของเหตุการณ์เวลาที่เกิดขึ้นทุกๆสิบวินาทีดูเหมือนจะไม่เป็นประโยชน์คุณสามารถเริ่มตัวจับเวลาได้เมื่อช่องป้อนข้อมูลได้รับโฟกัสและยกเลิก (ด้วย clearInterval ()) เมื่อภาพเบลอ ฉันไม่คิดว่าจะเป็นไปได้ที่จะเปลี่ยนค่าของช่องป้อนข้อมูลโดยไม่ได้รับโฟกัสดังนั้นการเปิดและปิดตัวจับเวลาในแบบนี้จึงควรปลอดภัย

HTML5กำหนดoninputเหตุการณ์เพื่อตรวจจับการเปลี่ยนแปลงโดยตรงทั้งหมด มันได้ผลสำหรับฉัน

onchange จะเกิดขึ้นเฉพาะเมื่อผู้ใช้ทำการเปลี่ยนแปลงองค์ประกอบอินพุตโดยส่วนใหญ่จะเกิดขึ้นเมื่อองค์ประกอบสูญเสียโฟกัส

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

อ่านเพิ่มเติมเกี่ยวกับเหตุการณ์การเปลี่ยนแปลงที่นี่

อ่านเพิ่มเติมเกี่ยวกับเหตุการณ์การป้อนข้อมูลได้ที่นี่

ใช้เหตุการณ์ต่อไปนี้แทน "onchange"

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

ประการแรกอะไรที่ 'ไม่ได้ผล'? คุณไม่เห็นการแจ้งเตือน?

นอกจากนี้รหัสของคุณสามารถทำให้ง่ายขึ้นสำหรับสิ่งนี้

<input type="text" id="num1" name="num1" onkeydown="checkInput(this);" /> <br />

function checkInput(obj) {
    alert(obj.value); 
}

ฉันพบปัญหาที่ Safari ไม่เริ่มการทำงานของเหตุการณ์ "onchange" ในช่องป้อนข้อความ ฉันใช้ jQuery 1.7.2 "เหตุการณ์" และมันก็ใช้ไม่ได้เช่นกัน ฉันลงเอยด้วยการใช้เหตุการณ์ textchange ของ ZURB ทำงานร่วมกับ mouseevents และสามารถยิงได้โดยไม่ต้องออกจากสนาม:
http://www.zurb.com/playground/jquery-text-change-custom-event

$('.inputClassToBind').bind('textchange', function (event, previousText) {
    alert($(this).attr('id'));
});

ความคิดเห็นสองสามข้อที่ IMO มีความสำคัญ:

• องค์ประกอบการป้อนข้อมูลไม่ได้เปล่ง 'เปลี่ยน' กิจกรรมจนกว่ากระทำของผู้ใช้ ENTER หรือเบลอรอคอยเป็นพฤติกรรมที่ถูกต้อง

• เหตุการณ์ที่คุณต้องการใช้คือ"input"(" oninput ") นี่แสดงให้เห็นถึงความแตกต่างระหว่างสองอย่างนี้: https://javascript.info/events-change-input

• เหตุการณ์ทั้งสองส่งสัญญาณท่าทาง / ช่วงเวลาของผู้ใช้ที่แตกต่างกัน 2 รายการ (เหตุการณ์ "อินพุต" หมายถึงผู้ใช้กำลังเขียนหรือนำทางตัวเลือกรายการที่เลือก แต่ยังไม่ยืนยันการเปลี่ยนแปลง "เปลี่ยน" หมายถึงผู้ใช้เปลี่ยนค่า (ด้วยการป้อนหรือเบลอ ของเรา)

• การฟังเหตุการณ์สำคัญอย่างที่หลายคนแนะนำในที่นี้ถือเป็นแนวทางปฏิบัติที่ไม่ดีในกรณีนี้ (เหมือนคนที่ปรับเปลี่ยนพฤติกรรมเริ่มต้นของ ENTER บนอินพุต) ...

• jQuery ไม่มีส่วนเกี่ยวข้องกับสิ่งนี้ ทั้งหมดนี้อยู่ในมาตรฐาน HTML

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

สองเซ็นต์ของฉัน

onkeyup ทำงานให้ฉัน onkeypress ไม่ทริกเกอร์เมื่อกดพื้นที่ด้านหลัง

มันจะดีกว่าที่จะใช้กับonchange(event) <select>ด้วย<input>คุณสามารถใช้ด้านล่างเหตุการณ์:

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

ลองonpropertychange. ใช้ได้กับ IE เท่านั้น