자동 완료 시 트리거된 이벤트가 있습니까?

자동 완료 시 트리거된 이벤트가 있습니까?

저는 폼이 아주 단순해요.사용자가 입력 필드에 입력하면 페이지의 다른 곳에 입력한 내용을 업데이트합니다.이 모든 것이 잘 작동합니다.업데이트를 에 묶었습니다.keyup,change그리고.click사건.

유일한 문제는 브라우저의 자동 완성 상자에서 입력을 선택하면 업데이트되지 않는다는 것입니다.자동 완료에서 선택할 때 트리거되는 이벤트가 있습니까(둘 다 아님).change도 아니다clickautocomplete 박스에서 선택하고 입력 필드를 흐리게 하면 업데이트가 실행됩니다.자동 완료가 되는 대로 작동이 되었으면 합니다.

참조: http://jsfiddle.net/pYKKp/ (hopefully 과거에 "이메일"이라는 이름의 입력으로 많은 양식을 작성했습니다.)

HTML:

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

CSS:

div { 
    float: right; 
} 

스크립트:

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

를 사용하는 것을 추천합니다.monitorEvents. 웹 인스펙터와 파이어버그에서 자바스크립트 콘솔이 제공하는 기능으로 요소에서 생성되는 모든 이벤트를 출력합니다.사용 방법의 예는 다음과 같습니다.

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

사용자의 경우 Firefox와 Opera 모두 사용자가 자동 완료 드롭다운에서 항목을 선택하면 이벤트가 발생합니다.IE7-8에서는 사용자가 포커스를 변경한 후 이벤트가 생성됩니다.최신 크롬에서도 유사한 이벤트가 발생합니다.

자세한 브라우저 호환성 차트는 다음과 같습니다.

여기 멋진 해결책이 있습니다.

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

크롬과 파이어폭스로 테스트를 해봤는데 다른 브라우저에서도 가능할 것 같습니다.

나는 많은 요소를 가진 이벤트를 많이 시도했지만 자동완료에서 선택할 때만 트리거됩니다.

누군가의 시간을 절약할 수 있기를 바랍니다.

Xavi가 설명한 것처럼 100% 크로스 브라우저를 사용할 수 있는 솔루션은 없기 때문에 이를 위해 스스로 트릭을 만들었습니다(계속하려면 5단계).
1.몇 가지 새로운 어레이가 필요합니다.

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

2.트리거할 입력 텍스트에 초점을 맞추면("이메일"의 경우, 예를 들어 "이름"의 경우) jQuery(필요하지 않음)를 사용하여 Interval을 설정합니다.

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

3.블러에서 간격을 제거합니다. (항상 jQuery noted thought). 값이 변경되었는지 확인합니다.

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.이제, 변화를 확인하는 주요 기능은 다음과 같습니다.

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

중요 참고: 트리거된 입력 HTML 요소를 참조하여 위의 기능 안에 "이것"을 사용할 수 있습니다.해당 함수가 작동하려면 ID를 지정해야 하며 함수를 전달하거나 함수 이름 또는 명령 문자열을 콜백으로 전달할 수 있습니다.

5.마지막으로 자동 완성 드롭다운 목록에서 값을 선택한 경우에도 입력 값이 변경되면 작업을 수행할 수 있습니다.

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

중요한 참고: 다시 위의 함수 안에서 트리거된 입력 HTML 요소를 참조하여 "이것"을 사용합니다.

작업 중인 피들!!!
복잡하게 들리겠지만 그렇지 않습니다.
작업용 피들을 준비했는데, 변경할 입력은 "이름"으로 명명되므로 온라인 형태로 이름을 입력하면 테스트할 브라우저의 자동 완성 드롭다운 목록이 있을 수 있습니다.

"blur"를 추가합니다. 모든 브라우저에서 작동합니다!

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

jQuery OR JAVASCRIPT로 폼 입력 시 자동 완료 탐지

사용방법: 이벤트 입력.(입력 또는 텍스트 영역) 값 제안을 선택하는 방법

예를 들어 JQuery의 경우:

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

});

예를 들어 자바스크립트의 경우:

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

이 시작은 abax 쿼리...

유일하게 확실한 방법은 구간을 사용하는 것입니다.

루카의 대답은 제게 너무 복잡해서 누군가에게 도움이 되기를 바라는 저만의 짧은 버전을 만들었습니다. (아마도 미래의 저조차도)

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

Chrome, Mozilla, 심지어 IE에서도 테스트를 받았습니다.

나는 다음을 통해 깨달았습니다.monitorEvents적어도 크롬에서는.keyup이벤트가 자동 완료 전에 실행됩니다.input이벤트. 정상적인 키보드 입력에서 시퀀스는keydown input keyup, 그래서 입력 후에.

제가 한 일은 다음과 같습니다.

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

다른 브라우저로 확인해야 하지만 간격이 없는 방법일 수도 있습니다.

이를 위한 이벤트는 필요하지 않다고 생각합니다. @xavi의 답변에서 알 수 있듯이 이에 대한 브라우저 전체 지원은 없습니다.

기본값의 변경 사항이 있는지 필드를 한 번 확인하는 기능을 로드한 후에 추가하거나, 특정 값을 다른 곳에 복사하는 것만으로 초기화가 제대로 되었는지 확인하기만 하면 됩니다.

언급URL : https://stackoverflow.com/questions/8548533/any-event-triggered-on-autocomplete