Câu hỏi Bất kỳ sự kiện nào được kích hoạt trên tự động hoàn thành?


Tôi có một hình thức khá đơn giản. Khi người dùng nhập vào trường nhập, tôi muốn cập nhật những gì họ đã nhập ở một nơi khác trên trang. Điều này tất cả hoạt động tốt. Tôi đã giới hạn bản cập nhật cho keyup, change và click sự kiện.

Vấn đề duy nhất là nếu bạn chọn một đầu vào từ hộp tự động hoàn thành của trình duyệt, nó không cập nhật. Có sự kiện nào kích hoạt khi bạn chọn tự động hoàn thành hay không (có vẻ như không phải là change cũng không click). Lưu ý rằng nếu bạn chọn từ hộp tự động điền và mơ hồ trường nhập, cập nhật sẽ được kích hoạt. Tôi muốn cho nó được kích hoạt ngay sau khi tự động hoàn thành.

Xem: http://jsfiddle.net/pYKKp/ (hy vọng bạn đã điền vào rất nhiều biểu mẫu trong quá khứ với đầu vào có tên là "email").

HTML:

<input name="email" /> 
<div id="whatever">&lt;whatever></div> 

CSS:

div { 
    float: right; 
} 

Kịch bản:

$("input").on('keyup change click', function () { 
   var v = $(this).val(); 
    if (v) { 
     $("#whatever").text(v);   
    }  
    else { 
        $("#whatever").text('<whatever>'); 
    } 
}); 

54
2017-12-17 22:54


gốc


kiểm tra câu trả lời của tôi đây - Lev Kazakov


Các câu trả lời:


Tôi khuyên bạn nên sử dụng monitorEvents. Đó là một chức năng được cung cấp bởi bảng điều khiển javascript ở cả hai web thanh tra và con đom đóm in ra tất cả các sự kiện được tạo bởi phần tử. Dưới đây là ví dụ về cách bạn sẽ sử dụng:

monitorEvents($("input")[0]);

Trong trường hợp của bạn, cả Firefox và Opera đều tạo ra input sự kiện khi người dùng chọn một mục từ menu thả xuống tự động hoàn tất. Trong IE7-8 change sự kiện được tạo ra sau khi người dùng thay đổi tiêu điểm. Chrome mới nhất tạo ra sự kiện tương tự.

Bạn có thể tìm thấy biểu đồ tương thích trình duyệt chi tiết tại đây:
https://developer.mozilla.org/en-US/docs/Web/Events/input


62
2017-12-17 23:02



Cảm ơn, điều đó giúp với Firefox ít nhất. Các change sự kiện vẫn xuất hiện để được kích hoạt khi làm mờ, vì vậy tôi không cần phải xem mờ. - Explosion Pills
Oh đúng, tôi đã không nhận thấy. - Xavi
BTW, hóa ra là nghe input cũng giúp với Opera. - Xavi
1 cho chức năng monitorEvents. TUYỆT VỜI - giammin
Tôi vừa kiểm tra nghe input sự kiện và nó hoạt động cho tất cả các trình duyệt mà tôi đã cài đặt. Phiên bản: Firefox 21.0, Opera 12.15, Chrome 27, Safari 5.1.7 và IE 9. - awe


Đây là một giải pháp tuyệt vời.

$('html').bind('input', function() {
    alert('test');
});

Tôi đã thử nghiệm với Chrome và Firefox và nó cũng sẽ hoạt động cho các trình duyệt khác.

Tôi đã thử rất nhiều sự kiện với nhiều yếu tố nhưng chỉ điều này được kích hoạt khi bạn chọn từ tự động hoàn thành.

Hy vọng nó sẽ tiết kiệm thời gian của một người.


16
2017-10-29 11:22



Điều này không hoạt động trong tất cả các trình duyệt, tuy nhiên, nó hoạt động ở hầu hết các trình duyệt trong đó change sự kiện không được kích hoạt, vì vậy tất cả những gì bạn cần là thêm người nghe vào change VÀ input sự kiện. $field.on('change input', changeFunction) - MarthyM
tôi sử dụng $input.on('keyup input change paste', callback) . Hoạt động rất tốt. - Sorin C


Thêm "làm mờ". hoạt động trong tất cả các trình duyệt!

$("input").on('blur keyup change click', function () {

3
2018-05-15 19:19



Cả hai sự kiện đó đều không được kích hoạt khi bạn tự động hoàn thành đầu vào. Đọc OP. - machineaddict
@machineaddict autocomplete không phải là một sự kiện javascript. Những gì bạn có thể làm là chỉnh sửa chức năng tự động hoàn thành của mình để chạy một hàm khác khi tự động hoàn thành. Nếu bạn muốn chia sẻ chức năng tự động hoàn thành, tôi có thể xem và trợ giúp bạn. - Kareem
Tự động hoàn thành có sự kiện, đọc này. Và câu trả lời là vào trang này và đang hoạt động hoàn hảo. Bạn nên chỉnh sửa câu trả lời của mình. - machineaddict
Câu trả lời đầu tiên nói rõ ràng nó không hoạt động trên tất cả các trình duyệt. câu trả lời thứ hai làm những gì tôi đã đề xuất chính xác trong bình luận trước của tôi. Không có trình xử lý sự kiện như onAutocomplete. Tôi rất vui vì bạn đã tìm được giải pháp cho vấn đề của mình. Cảm ơn bạn đã chia sẻ liên kết. Họ có thể giúp ai đó. - Kareem


Như Xavi giải thích, không có giải pháp nào có 100% trình duyệt chéo cho điều đó, vì vậy tôi đã tự tạo một thủ thuật cho riêng mình (5 bước để tiếp tục):
1. Tôi cần một vài mảng mới:

window.timeouts     = new Array();
window.memo_values  = new Array();


2. tập trung vào các văn bản đầu vào tôi muốn kích hoạt (trong trường hợp của bạn "email", trong ví dụ "tên" của tôi) tôi thiết lập một khoảng thời gian, ví dụ bằng cách sử dụng jQuery (không cần suy nghĩ):

jQuery('#name').focus(function ()
{
    var id = jQuery(this).attr('id');
    window.timeouts[id] = setInterval('onChangeValue.call(document.getElementById("'+ id +'"), doSomething)', 500);
});


3. trên blur tôi loại bỏ khoảng thời gian: (luôn luôn sử dụng jQuery không cần suy nghĩ), và tôi xác minh nếu giá trị thay đổi

jQuery('#name').blur(function ()
{
    var id = jQuery(this).attr('id');
    onChangeValue.call(document.getElementById(id), doSomething);
    clearInterval(window.timeouts[id]);
    delete window.timeouts[id];
});


4. Bây giờ, chức năng chính mà kiểm tra thay đổi là như sau

function onChangeValue(callback)
{
    if (window.memo_values[this.id] != this.value)
    {
        window.memo_values[this.id] = this.value;

        if (callback instanceof Function)
        {
            callback.call(this);
        }
        else
        {
            eval( callback );
        }
    }
}

Lưu ý quan trọng: bạn có thể sử dụng "this" bên trong hàm trên, đề cập đến phần tử HTML đầu vào được kích hoạt của bạn. Một id phải được chỉ định để hàm đó hoạt động và bạn có thể chuyển một hàm hoặc tên hàm hoặc chuỗi lệnh dưới dạng gọi lại.


5. Cuối cùng, bạn có thể làm điều gì đó khi giá trị đầu vào được thay đổi, ngay cả khi giá trị được chọn từ danh sách thả xuống tự động hoàn tất

function doSomething()
{
    alert('got you! '+this.value);
}

Lưu ý quan trọng: một lần nữa bạn sử dụng "this" bên trong hàm trên đề cập đến phần tử HTML đầu vào được kích hoạt của bạn.

LÀM VIỆC FIDDLE !!!
Tôi biết nó nghe có vẻ phức tạp, nhưng không phải vậy.
Tôi đã chuẩn bị một làm việc fiddle cho bạn, đầu vào để thay đổi được đặt tên là "tên" vì vậy nếu bạn đã từng nhập tên của mình vào biểu mẫu trực tuyến, bạn có thể có danh sách thả xuống tự động hoàn tất của trình duyệt để kiểm tra.


2
2017-09-20 10:58





Phát hiện tự động điền trên đầu vào biểu mẫu bằng jQuery HOẶC JAVASCRIPT

Sử dụng: Biến cố đầu vào. Để chọn đề xuất giá trị (đầu vào hoặc văn bản)

VÍ DỤ CHO JQUERY:

$(input).on('input', function() { 
alert("Number selected ");

});

VÍ DỤ CHO JAVASCRIPT:

<input type="text"  onInput="affiche(document.getElementById('something').text)" name="Somthing" />

Bắt đầu truy vấn ajax này ...


2
2017-08-06 19:09





Cách chắc chắn duy nhất là sử dụng một khoảng thời gian.

Câu trả lời của Luca quá phức tạp đối với tôi, vì vậy tôi đã tạo ra một phiên bản ngắn của riêng mình, hy vọng sẽ giúp một ai đó (thậm chí có thể là tôi từ tương lai):

    $input.on( 'focus', function(){
        var intervalDuration = 1000, // ms
            interval = setInterval( function(){

                // do your tests here
                // ..................

                // when element loses focus, we stop checking:
                if( ! $input.is( ':focus' ) ) clearInterval( interval );  

            }, intervalDuration );
    } );

Thử nghiệm trên Chrome, Mozilla và thậm chí cả IE.


1
2018-01-11 11:33





Tôi không nghĩ rằng bạn cần một sự kiện cho điều này: điều này xảy ra chỉ một lần, và không có hỗ trợ tốt trên toàn trình duyệt cho điều này, như được hiển thị bởi câu trả lời của @xavi.

Chỉ cần thêm một hàm sau khi tải nội dung kiểm tra các trường một lần cho bất kỳ thay đổi nào trong giá trị mặc định hoặc nếu chỉ sao chép một giá trị nhất định đến một địa điểm khác, chỉ cần sao chép nó để đảm bảo nó được khởi tạo đúng cách.


0
2017-12-18 10:51





Tôi đã nhận ra qua monitorEvents ít nhất trong Chrome keyup sự kiện bị sa thải trước tự động hoàn thành input biến cố. Trên đầu vào bàn phím thông thường, chuỗi keydown  input  keyup, vì thế sau đầu vào.

Những gì tôi đã làm là sau đó:

let myFun = ()=>{ ..do Something };

input.addEventListener('change', myFun );

//fallback in case change is not fired on autocomplete
let _k = null;
input.addEventListener( 'keydown', (e)=>_k=e.type );
input.addEventListener( 'keyup', (e)=>_k=e.type );
input.addEventListener( 'input', (e)=>{ if(_k === 'keyup') myFun();})

Cần phải được kiểm tra với trình duyệt khác, nhưng đó có thể là một cách không có khoảng thời gian.


0
2017-08-30 11:04