Làm cách nào để tôi triển khai onchange <input type = hung text văn bản> với jQuery?

<select>có API này. Thế còn <input>?

Bạn có thể dùng .change()

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

Tuy nhiên, sự kiện này sẽ chỉ kích hoạt khi bộ chọn bị mất tiêu điểm, vì vậy bạn sẽ cần phải nhấp vào một nơi khác để có tác phẩm này.

Nếu điều đó không hoàn toàn phù hợp với bạn, bạn có thể sử dụng một số sự kiện jQuery khác như keyup , keydown hoặc keypress - tùy thuộc vào hiệu ứng chính xác mà bạn muốn.

Như @pimvdb đã nói trong bình luận của mình,

Lưu ý rằng thay đổi sẽ chỉ kích hoạt khi phần tử đầu vào bị mất tiêu điểm. Ngoài ra còn có sự kiện đầu vào kích hoạt bất cứ khi nào hộp văn bản cập nhật mà không cần mất tập trung. Không giống như các sự kiện chính, nó cũng hoạt động để dán / kéo văn bản.

(Xem tài liệu .)

Điều này rất hữu ích, nó đáng để đưa nó vào một câu trả lời. Hiện tại (v1.8 *?) Không có fn thuận tiện .input () trong jquery, vì vậy cách để làm điều đó là

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

Tôi sẽ đề nghị sử dụng sự kiện keyup như sau:

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

Có một vài cách để đạt được kết quả tương tự vì vậy tôi đoán đó là tùy theo sở thích và phụ thuộc vào cách bạn muốn nó hoạt động chính xác.

Cập nhật: Điều này chỉ hoạt động cho đầu vào thủ công không sao chép và dán.

Để sao chép và dán tôi muốn giới thiệu như sau:

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

Đây là mã tôi sử dụng:

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

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

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

Điều này hoạt động khá độc đáo, đặc biệt khi kết hợp với một jqGridđiều khiển. Bạn chỉ có thể nhập vào một hộp văn bản và ngay lập tức xem kết quả trong của bạn jqGrid.

Có một và chỉ một cách đáng tin cậy để làm điều này , và đó là bằng cách kéo giá trị trong một khoảng và so sánh nó với một giá trị được lưu trữ.

Lý do tại sao đây là cách duy nhất là vì có nhiều cách để thay đổi trường đầu vào bằng nhiều cách nhập khác nhau (bàn phím, chuột, dán, lịch sử trình duyệt, giọng nói, v.v.) và bạn không bao giờ có thể phát hiện tất cả chúng bằng cách sử dụng các sự kiện tiêu chuẩn trong một chéo môi trường -browser.

May mắn thay, nhờ cơ sở hạ tầng sự kiện trong jQuery, việc thêm sự kiện trao đổi đầu vào của bạn khá dễ dàng. Tôi đã làm như vậy ở đây:

$.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);
    }
};

Sử dụng nó như: $('input').on('inputchange', function() { console.log(this.value) });

Có một bản demo ở đây: http://jsfiddle.net/LGAWY/

Nếu bạn sợ nhiều khoảng thời gian, bạn có thể liên kết / hủy liên kết sự kiện này trên focus/ blur.

<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 );
});

Tôi khuyên bạn nên sử dụng thistừ khóa để có quyền truy cập vào toàn bộ phần tử để bạn có thể làm mọi thứ bạn cần với phần tử này.

Những điều sau đây sẽ hoạt động ngay cả khi đó là các cuộc gọi động / Ajax.

Kịch bản:

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

Html

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

Tôi hy vọng mã làm việc này sẽ giúp được ai đó đang cố gắng truy cập động / các cuộc gọi Ajax ...

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

Bạn chỉ có thể làm việc với id

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

Bạn có thể làm điều này theo những cách khác nhau, keyup là một trong số đó. Nhưng tôi đang đưa ra ví dụ dưới đây với sự thay đổi.

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

NB: input [name = "vat_id"] thay thế bằng ID hoặc tên đầu vào của bạn .

Nếu bạn muốn kích hoạt sự kiện khi bạn nhập , hãy sử dụng như sau:

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

Nếu bạn muốn kích hoạt sự kiện khi rời khỏi trường nhập , hãy sử dụng như sau:

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

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

Điều này làm việc cho tôi. Nếu trường có tên trườngA được nhấp hoặc bất kỳ khóa nào được nhập, trường sẽ cập nhật trường với id trườngB .

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

Bạn có thể sử dụng .keypress().

Ví dụ: hãy xem xét HTML:

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

Trình xử lý sự kiện có thể được liên kết với trường đầu vào:

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

Tôi hoàn toàn đồng ý với Andy; tất cả phụ thuộc vào cách bạn muốn nó hoạt động.