Jak zidentyfikować błędne zachowanie w przypadku "wejścia" bez wykrycia przeglądarki?

Question

Zacznę od pytania. Kiedy określona przeglądarka ma wadliwą implementację funkcji, a Twój javascript musi wiedzieć, czy obecna przeglądarka ma taką błędną implementację, czy może użyć alternatywnej strategii, jak się dowiedzieć, czy implementacja jest błędna bez wykonywania podsłuchiwania typu przeglądarki (co ogólnie uważa się za złe)?

Oto cała sytuacja.

Pracowałem nad kodem, który chce użyć "input" event do otrzymywania powiadomień o zmianach użytkownika w polu <input type="text"> (działa znacznie lepiej niż zdarzenie "change"), ale gdy to zdarzenie nie jest obsługiwane, to używa znacznie bardziej skomplikowany schemat obejmujący wiele innych wydarzeń.

Ponieważ zdarzenie "input" jest obsługiwane tylko w niektórych przeglądarkach, szukałem sposobu na wykrywanie cech zdarzenia (zamiast podsłuchiwania przez klienta użytkownika przeglądarki), ponieważ wykrywanie cech jest na ogół bardziej niezawodnym sposobem działania. rzeczy. Jako takie, natknąłem this great article za to dokładnie, że ten kod i wydaje się działać:

var isEventSupported = (function(){ 
    var TAGNAMES = { 
     'select':'input','change':'input', 
     'submit':'form','reset':'form', 
     'error':'img','load':'img','abort':'img' 
    } 
    function isEventSupported(eventName) { 
     var el = document.createElement(TAGNAMES[eventName] || 'div'); 
     eventName = 'on' + eventName; 
     var isSupported = (eventName in el); 
     if (!isSupported) { 
     el.setAttribute(eventName, 'return;'); 
     isSupported = typeof el[eventName] == 'function'; 
     } 
     el = null; 
     return isSupported; 
    } 
    return isEventSupported; 
    })(); 

Potem wpadłem na problemy z IE (niespodzianka). Podczas gdy IE rzekomo obsługuje zdarzenie "input" i przechodzi test funkcji powyżej i działa przez większość czasu, wsparcie IE jest błędne jak cholera. Nie wywołuje nawet zdarzenia, gdy użytkownik trafi w klawisz Backspace (między innymi brakującymi zachowaniami). W związku z tym nie mogę na nim polegać w IE. Zbudowałem więc ten ładny, czysty kod, który wykonał test funkcji dla zdarzenia "input" i wykorzystał jego bardzo czystą implementację, gdy był obecny, a gdy nie był obecny, wykorzystywał tę znacznie brzydszą pracę obejmującą monitorowanie ośmiu innych zdarzeń. Teraz jest wyłączony w IE, ponieważ test funkcji dla zdarzenia "wejściowego" mija, więc kod próbuje go użyć, ale jest błędny jak diabli, więc nie działa.

Ponieważ te błędy IE pojawiają się w działaniach użytkownika, nie mogę wymyślić żadnego sposobu opracowania testu funkcji javascript w celu zidentyfikowania błędnego zachowania. Jako taka, moją jedyną obecną ścieżką jest uciekanie się do wąchania przeglądarki i odmowa polegania na znaczniku "input", jeśli przeglądarka jest IE.

Czy są tu dostępne opcje umożliwiające identyfikację błędnego zachowania w przypadku zdarzenia "input" poza wykrywaniem przeglądarki? Gdyby ktoś miał do czynienia z podsłuchiwaniem przeglądarki, czy istnieje sposób na identyfikację IE przez zachowanie, a nie na ciąg agenta użytkownika, który może być dowolnie sfałszowany i nie jest gwarantowany, aby był dokładny?

Answer 1

Jeśli jesteś zainteresowany w cross-browser "Zmiana wpisu" zdarzenie, tutaj jest moje wykonanie:

function onInputChange(domInput, callback) { 
    if (domInput.addEventListener) { 
     domInput.addEventListener('input', callback, false); // Firefox, etc. 
    } else if (domInput.attachEvent) { 
     domInput.attachEvent('onpropertychange', callback); // IE 
    } 
} 

Przykład użycia:

var leInput = document.getElementById('myInput'); 
var leCallback = function() { 
    // awesome stuff here 
}; 

onInputChange(leInput, leCallback); 

działa we wszystkich przeglądarkach, obsługuje wejście klawiatury i kopiowanie/wklejanie.

Istnieje jednak wyjątek od przeklętego IE9, który nie istniał w momencie, w którym napisałem powyższy kod. Czy Microsoft kiedykolwiek rozważał naprawienie błędu? : \

Answer 2

Jamie-pasztet sugerować coś takiego:

var broken = false, 
     ta = angular.element('<textarea>').on('input', function(evt) { 
      broken = true; 
     }); 
    ta.attr('placeholder', 'IESUCKS'); 

Więc można sprawdzić „obsługującej zdarzenie wejściowe i nie jest«uszkodzony»” w kodzie.

Zobacz https://github.com/angular/angular.js/issues/2614?source=c