ฉันจะใช้ onchange ของ <input type =“ text”> กับ jQuery ได้อย่างไร

<select>มี API นี้ เกี่ยวกับ<input>อะไร

คุณสามารถใช้ได้ .change()

$('input[name=myInput]').change(function() { ... });

อย่างไรก็ตามเหตุการณ์นี้จะเริ่มขึ้นเมื่อตัวเลือกสูญเสียการโฟกัสดังนั้นคุณจะต้องคลิกที่อื่นเพื่อให้ได้งานนี้

หากที่ไม่ถูกต้องสำหรับคุณคุณสามารถใช้บางส่วนของอื่น ๆเหตุการณ์ jQueryเช่นkeyup , KeyDownหรือปุ่มกด - ขึ้นอยู่กับผลที่คุณต้องการ

@pimvdb พูดในความคิดเห็นของเขา

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

(ดูเอกสารประกอบ )

มันมีประโยชน์มากมันคุ้มค่าที่จะตอบคำถามนี้ ปัจจุบัน (v1.8 *?) ไม่มี. input () ความสะดวกสบาย fn ใน jquery ดังนั้นวิธีที่จะทำคือ

$('input.myTextInput').on('input',function(e){
 alert('Changed!')
});

ฉันขอแนะนำให้ใช้เหตุการณ์ keyup ดังต่อไปนี้:

$('elementName').keyup(function() {
 alert("Key up detected");
});

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

อัปเดต: ใช้งานได้กับอินพุตแบบแมนนวลเท่านั้นไม่ได้คัดลอกและวาง

สำหรับการคัดลอกและวางฉันอยากจะแนะนำสิ่งต่อไปนี้:

$('elementName').on('input',function(e){
 // Code here
});

นี่คือรหัสที่ฉันใช้:

$("#tbSearch").on('change keyup paste', function () {
    ApplyFilter();
});

function ApplyFilter() {
    var searchString = $("#tbSearch").val();
    //  ... etc...
}

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

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

มีวิธีที่เชื่อถือได้เพียงวิธีเดียวเท่านั้นและมีการดึงค่าในช่วงเวลาและเปรียบเทียบกับค่าแคช

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

โชคดีที่ขอบคุณโครงสร้างพื้นฐานของกิจกรรมใน jQuery มันค่อนข้างง่ายที่จะเพิ่มเหตุการณ์การป้อนข้อมูลของคุณเอง ฉันทำที่นี่:

$.event.special.inputchange = {
    setup: function() {
        var self = this, val;
        $.data(this, 'timer', window.setInterval(function() {
            val = self.value;
            if ( $.data( self, 'cache') != val ) {
                $.data( self, 'cache', val );
                $( self ).trigger( 'inputchange' );
            }
        }, 20));
    },
    teardown: function() {
        window.clearInterval( $.data(this, 'timer') );
    },
    add: function() {
        $.data(this, 'cache', this.value);
    }
};

ใช้มันเหมือน: $('input').on('inputchange', function() { console.log(this.value) });

มีตัวอย่างที่นี่: http://jsfiddle.net/LGAWY/

หากคุณกำลังกลัวของช่วงหลายคุณสามารถผูก / ยกเลิกการเชื่อมโยงเหตุการณ์นี้บน/focusblur

<input id="item123" class="firstName" type="text" value="Hello there" data-someattr="CoolExample" />

$(".firstName").on('change keyup paste', function () {
   var element = $(this);
   console.log(element);
   var dataAttribute = $(element).attr("data-someattr");
   console.log("someattr: " + dataAttribute );
});

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

ข้อมูลต่อไปนี้จะใช้ได้แม้ว่าจะเป็นการโทรแบบไดนามิก / Ajax

สคริปต์:

jQuery('body').on('keyup','input.addressCls',function(){
  console.log('working');
});

HTML,

<input class="addressCls" type="text" name="address" value="" required/>

ฉันหวังว่ารหัสการทำงานนี้จะช่วยให้คนที่พยายามเข้าถึงแบบไดนามิก / โทรอาแจ็กซ์ ...

$("input").keyup(function () {
    alert("Changed!");
});

คุณสามารถทำงานกับ ID ได้

$("#your_id").on("change",function() {
    alert(this.value);
});

คุณสามารถทำได้ด้วยวิธีที่แตกต่างกันการกดคีย์เป็นหนึ่งในนั้น แต่ฉันกำลังยกตัวอย่างด้านล่างเมื่อมีการเปลี่ยนแปลง

$('input[name="vat_id"]').on('change', function() {
    if($(this).val().length == 0) {
        alert('Input field is empty');
    }
});

หมายเหตุ: อินพุต [name = "vat_id"]แทนที่ด้วยIDอินพุตหรือชื่อของคุณ

หากคุณต้องการทริกเกอร์เหตุการณ์ขณะพิมพ์ให้ใช้สิ่งต่อไปนี้:

$('input[name=myInput]').on('keyup', function() { ... });

หากคุณต้องการทริกเกอร์เหตุการณ์เมื่อออกจากฟิลด์อินพุตให้ใช้สิ่งต่อไปนี้:

$('input[name=myInput]').on('change', function() { ... });

$("input").change(function () {
    alert("Changed!");
});

สิ่งนี้ใช้ได้สำหรับฉัน ถ้าเขตที่มีชื่อfieldaมีการคลิกหรือคีย์ใด ๆ เข้าไปในการปรับปรุงข้อมูลที่มี ID FieldB

jQuery("input[name='fieldA']").on("input", function() {
    jQuery('#fieldB').val(jQuery(this).val());
});

.keypress()คุณสามารถใช้

ตัวอย่างเช่นพิจารณา HTML:

<form>
  <fieldset>
    <input id="target" type="text" value="Hello there" />
  </fieldset>
</form>
<div id="other">
  Trigger the handler
</div>

ตัวจัดการเหตุการณ์สามารถผูกกับฟิลด์อินพุต:

$("#target").keypress(function() {
  alert("Handler for .keypress() called.");
});

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