เหตุการณ์การเปลี่ยนแปลงกล่องข้อความ jQuery ไม่เริ่มทำงานจนกว่ากล่องข้อความจะสูญเสียโฟกัส?


134

ฉันพบว่าเหตุการณ์การเปลี่ยนแปลง jQuery บนกล่องข้อความไม่เริ่มทำงานจนกว่าฉันจะคลิกนอกกล่องข้อความ

HTML:

<input type="text" id="textbox" />

JS:

$("#textbox").change(function() {alert("Change detected!");});

ดูการสาธิตเกี่ยวกับ JSFiddle

แอปพลิเคชันของฉันต้องการให้เหตุการณ์เริ่มทำงานทุกครั้งที่มีการเปลี่ยนแปลงอักขระในกล่องข้อความ ฉันลองใช้คีย์อัพแทน ...

$("#textbox").keyup(function() {alert("Keyup detected!");});

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

วิธีแก้ปัญหาใด ๆ การมีผู้ฟังทั้งสองจะก่อให้เกิดปัญหาหรือไม่?


^^ นี้. คุณสามารถมีตัวจัดการเหตุการณ์ได้มากเท่าที่คุณต้องการ
คืนสถานะ Monica Cellio

คำตอบ:


299

การผูกเข้ากับทั้งสองเหตุการณ์เป็นวิธีปกติที่จะทำ คุณยังสามารถเชื่อมโยงกับเหตุการณ์วาง

คุณสามารถเชื่อมโยงกับหลายเหตุการณ์เช่นนี้:

$("#textbox").on('change keyup paste', function() {
    console.log('I am pretty sure the text box changed');
});

หากคุณต้องการอวดดีคุณควรเชื่อมโยงกับ mouseup เพื่อรองรับการลากข้อความไปรอบ ๆ และเพิ่มlastValueตัวแปรเพื่อให้แน่ใจว่าข้อความเปลี่ยนไปจริง:

var lastValue = '';
$("#textbox").on('change keyup paste mouseup', function() {
    if ($(this).val() != lastValue) {
        lastValue = $(this).val();
        console.log('The text box really changed this time');
    }
});

และหากคุณต้องการsuper duperอวดดีคุณควรใช้ตัวจับเวลาช่วงเวลาเพื่อรองรับการเติมอัตโนมัติปลั๊กอิน ฯลฯ :

var lastValue = '';
setInterval(function() {
    if ($("#textbox").val() != lastValue) {
        lastValue = $("#textbox").val();
        console.log('I am definitely sure the text box realy realy changed this time');
    }
}, 500);

10
ในที่สุดก็มีคนอ่านคำถามและตอบคำถามทั้งหมด!
คืนสถานะ Monica Cellio

4
.on('change keyup paste', function() {...}ยิงหลายครั้งจริง! หากฉันพิมพ์อักขระแล้วคลิกภายนอกเหตุการณ์ 'เปลี่ยน' และ 'คีย์อัพ' จะเริ่มทำงานซึ่งนำไปสู่การเรียกใช้ฟังก์ชันหลายครั้ง! หากฉันคลิกขวาที่วางแล้วคลิกด้านนอก "เปลี่ยน" และ "วาง" จะเริ่มทำงานทั้งคู่ แฮก! ในการใช้ Ctrl + V เพื่อวางแล้วคลิกด้านนอกยิงมันสามครั้ง !!
SNag

1
@SNag ใช่ดังนั้นคุณควรเพิ่มการตรวจสอบโดยใช้lastValueตัวแปรเพื่อให้แน่ใจว่ามีการเปลี่ยนแปลงจริง
Petah

1
+1. อย่างไรก็ตามการมีผลผูกพันกับ 'การเปลี่ยนแปลง' จำเป็นหรือไม่? ยังไม่ชัดเจนสำหรับฉันว่ากรณีใดที่จะจัดการที่ยังไม่ได้รับการจัดการเมื่อถึงเวลาที่ (เปลี่ยนแปลง) เริ่มทำงาน
Madbreaks

1
เหตุการณ์การวางจะเริ่มทำงานก่อนที่จะวางข้อความจริง
developerbmw

85

เบราว์เซอร์ที่ทันสมัยคุณสามารถใช้เหตุการณ์ :input

การสาธิต

$("#textbox").on('input',function() {alert("Change detected!");});

1
ดี - ฉันไม่รู้เรื่องนั้น มันเป็น HTML5 หรือเปล่า?
คืนสถานะ Monica Cellio

4
ฉันชอบที่จะยอมรับคำตอบนี้ แต่ก็อย่างที่คุณพูดนี่เป็นวิธีแก้ปัญหาสำหรับเบราว์เซอร์สมัยใหม่ เว็บแอปพลิเคชันของฉันถูกกำหนดเป้าหมายไปที่ผู้ใช้ที่ยังใช้ IE8 และสิ่งนี้ใช้ไม่ได้กับ IE8 :( ฉันจะพูดอะไร .. :(
SNag

ไม่เริ่มทำงานหากตัวอย่างเช่นเลือกข้อความทั้งหมดและกดปุ่มลบ
jjxtra

4
$(this).bind('input propertychange', function() {
        //your code here
    });

ใช้สำหรับพิมพ์วางคลิกขวาวางเมาส์เป็นต้น


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

1
วิธีแก้ปัญหาที่ง่ายและมีประสิทธิภาพ
Abdulhameed

4
if you write anything in your textbox, the event gets fired.
code as follows :

HTML:

<input type="text" id="textbox" />

JS:

<script type="text/javascript">
  $(function () {
      $("#textbox").bind('input', function() {
      alert("letter entered");
      });
   });
</script>

2

ลองสิ่งนี้:

$("#textbox").bind('paste',function() {alert("Change detected!");});

ดูการสาธิต JSFiddle


เนื่องจากคำถามอยู่ในการวางจึงไม่ได้ผล เหตุการณ์ไม่ได้เริ่มต้นเมื่อคลิกขวาแล้ววาง
Dhaval Marthak

และสิ่งที่เกี่ยวข้องกับการใช้งานbind()?
คืนสถานะ Monica Cellio

เขาบอกว่าเหตุการณ์คีย์อัพจะไม่เริ่มทำงานเมื่อคลิกขวา + วางมันดังนั้นkeyupและchange()มีพฤติกรรมทั่วไปของตัวเองดังนั้น id ที่เขาต้องการดำเนินการเหตุการณ์จึงpasteอาจเป็นตัวเลือก
Dhaval Marthak

แน่นอน แต่ที่ยังคงไม่ได้คำตอบว่าทำไมใช้แทนbind on
คืนสถานะ Monica Cellio

0

ลองใช้รหัสด้านล่าง:

$("#textbox").on('change keypress paste', function() {
  console.log("Handler for .keypress() called.");
});

วิธีการจับการวางด้วยเมาส์ดังที่กล่าวไว้ในคำถาม?
คืนสถานะ Monica Cellio

การกดแป้นพิมพ์นั้นเหมาะสมเพราะเขาบอกว่าevent to be fired on every character change in the textbox
Venkat.R

หากคุณอ่านคำถามทั้งหมดที่คุณเห็นเขาก็พูดเช่นกัน"...but it's a known fact that the keyup event isn't fired on right-click-and-paste."
คืนสถานะ Monica Cellio

0

การอ่านความคิดเห็นของคุณทำให้ฉันต้องแก้ไขสกปรก นี่ไม่ใช่วิธีที่ถูกต้องฉันรู้ แต่สามารถแก้ไขได้

$(function() {
    $( "#inputFieldId" ).autocomplete({
        source: function( event, ui ) {
            alert("do your functions here");
            return false;
        }
    });
});
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.