jQuery - trên văn bản nhập thay đổi

Question

Tôi đang cố tạo một hàm sẽ thực thi khi giá trị của text input field bị thay đổi. Giá trị của trường thay đổi khi một ô bảng được nhấp vào, không phải trên keyup và cũng không dán. Tôi đã thử nó như thế này:

$("#kat").change(function(){ 
    alert("Hello"); 
}); 

Và tôi có trường văn bản:

<input type="text" id="kat" value="0"/> 

nhưng nó không được làm việc. Bất kỳ giúp đỡ?

Answer 1

Đây là từ một bình luận trên trang tài liệu jQuery:

In, trình duyệt của HTML5 trước tuổi "KeyUp" chắc chắn là những gì bạn đang tìm kiếm. Trong HTML5 có một sự kiện mới, "đầu vào", hoạt động chính xác như bạn nghĩ rằng "thay đổi" nên có hành vi - trong đó nó bắn ngay sau khi một phím được nhấn để nhập thông tin vào một biểu mẫu.

$ ('element'). Bind ('input', function);

Answer 2

Tài liệu jQuery nói điều này "Nó cũng được hiển thị [kết quả thực thi trình xử lý] nếu bạn thay đổi văn bản trong trường và sau đó nhấp đi. Nếu trường mất tiêu điểm mà không có nội dung thay đổi, sự kiện không được kích hoạt. "

Thử KeyUp và KeyDown sự kiện, như thế này:

$("#kat").keydown(function(){ 
    alert("Hello"); 
}); 

Answer 3

Dường như với tôi như bạn đang cập nhật các giá trị của trường text trong javascript. Sự kiện onchange sẽ chỉ được kích hoạt khi bạn nhập dữ liệu và tab ra khỏi trường văn bản.

Một giải pháp thay thế là kích hoạt sự kiện thay đổi hộp văn bản khi sửa đổi giá trị hộp văn bản từ tập lệnh. Xem bên dưới,

$("#kat").change(function(){ 
    alert("Hello"); 
}); 


$('<tab_cell>').click (function() { 
    $('#kat') 
     .val($(this).text()) //updating the value of the textbox 
     .change();   //trigger change event. 
}); 

Answer 4

Điều đó phù hợp với tôi. Có thể là một vấn đề trình duyệt như đã đề cập, hoặc có thể jQuery không được đăng ký đúng cách, hoặc có lẽ vấn đề thực sự phức tạp hơn (bạn đã thực hiện một phiên bản đơn giản hơn để hỏi điều này). PS - đã phải bấm vào hộp văn bản để làm cho nó cháy.

http://jsfiddle.net/toddhd/Qt7fH/

Answer 5

Kỹ thuật này đang làm việc cho tôi:

$('#myInputFieldId').bind('input',function(){ 
       alert("Hello"); 
    }); 

Lưu ý rằng theo this JQuery doc, "trên" được khuyến khích chứ không phải ràng buộc trong các phiên bản mới hơn.

Answer 6

này làm việc cho tôi trên tất cả các trình duyệt và Jquery < = v1.10

$('#kat').on('keyup', function() { 
    alert("Hello"); 
}); 

hay vì nó có vẻ như bạn muốn

$('#kat').on('click', function() { 
    alert("Hello"); 
}); 

cháy Textbox đầu vào thay đổi lĩnh vực sự kiện như bạn mong chờ nó , jQuery.Thay đổi sự kiện chỉ hoạt động một cách chính xác trên các trình duyệt được hỗ trợ html5

Answer 7

này làm việc cho tôi

var change_temp = ""; 
$('#url_key').bind('keydown keyup',function(e){ 
    if(e.type == "keydown"){ 
     change_temp = $(this).val(); 
     return; 
    } 
    if($(this).val() != change_temp){ 
     // add the code to on change here 
    } 

}); 

Answer 8

function search() { 
     var query_value = $('input#search').val(); 
     $('b#search-string').html(query_value); 
     if(query_value !== ''){ 
      $.ajax({ 
       type: "POST", 
       url: "search.php", 
       data: { query: query_value }, 
       cache: false, 
       success: function(html){ 
        //alert(html); 
        $("ul#results").html(html); 
       } 
      }); 
     }return false;  
    } 

    $("input#search").live("keyup", function(e) { 
     clearTimeout($.data(this, 'timer')); 

     var search_string = $(this).val(); 

     if (search_string == '') { 
      $("ul#results").fadeOut(); 
      $('h4#results-text').fadeOut(); 
     }else{ 
      $("ul#results").fadeIn(); 
      $('h4#results-text').fadeIn(); 
      $(this).data('timer', setTimeout(search, 100)); 
     }; 
    }); 


and the html 
<input id="search" style="height:36px; font-size:13px;" type="text" class="form-control" placeholder="Enter Mobile Number or Email" value="<?php echo stripcslashes($_REQUEST["string"]); ?>" name="string" /> 
     <h4 id="results-text">Showing results for: <b id="search-string">Array</b></h4> 
     <ul id="results"></ul> 

Answer 9

Hãy thử điều này,

$('#kat').on('input',function(e){ 
alert('Hello') 
}); 

Answer 10

Gần đây tôi đã tự hỏi tại sao mã của tôi không hoạt động, sau đó Tôi nhận ra, tôi cần phải thiết lập các trình xử lý sự kiện ngay sau khi tài liệu được tải, nếu không trình duyệt tải dòng mã theo dòng, nó sẽ tải JavaScript, nhưng nó chưa có phần tử để gán eve nt xử lý nó. với ví dụ của bạn, nó phải như sau:

$(document).ready(function(){ 
    $("#kat").change(function(){ 
     alert("Hello"); 
    }); 
});