2009-05-14 11 views
13

Próbuję zasubskrybować zmiany zdarzeń na znaczniku wejściowym dla pełnego formularza ajax ajax. Te zdarzenia zmian nie są uruchamiane, gdy użytkownik kliknie propozycję autouzupełniania z FireFox.Zdarzenie zmiany zdarzenia autouzupełniania przechwytywania FireFox

Widziałem poprawki dla IE, ale nie FireFox. Możesz zobaczyć to zachowanie. Aby wykonać odtworzenie: wpisz dowolne dane wejściowe w jednym z pól i kliknij przycisk prześlij.

Rozpocznij wpisywanie wartości ponownie w tym samym polu.

Powinieneś zobaczyć pole autouzupełniania, które pojawi się pod polem wprowadzania. Zauważ, że kliknięcie sugestii nie wywołuje zdarzenia zmiany (nie wywołuje również zdarzenia kliknięcia).

Obecnie jedyną opcją jest wyłączenie autouzupełniania na tym polu, ale nie chcę tego robić.

+0

Proszę zmienić znak "prawidłowej odpowiedzi" na odpowiedź Jethro. Hack w odpowiedzi, którą zaznaczyłeś jako właściwą odpowiedź, nie jest konieczny! –

Odpowiedz

6

Jeśli to sprawia, że ​​czujesz się lepiej, jest to known bug

Proponowane obejście. (Nie moje, z here

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Mozilla Firefox Problem</title> 
<script type="text/javascript"> 
function fOnChange() 
{ 
    alert('OnChange Fired'); 
} 

var val_textBox; 

function fOnFocus() 
{ 
    val_textBox = document.getElementById('textBox').value; 
} 

function fOnBlur() 
{ 
    if (val_textBox != document.getElementById('textBox').value) { 
    fOnChange(); 
    } 
} 
</script> 
</head> 
<body> 
<form name="frm"> 
<table> 
<tr> 
<td><input type="text" id="textBox" name="textBox" onFocus="fOnFocus()" onBlur="fOnBlur()"></td> 
</tr> 
<tr> 
<td><input type="submit" value="Submit"></td> 
</tr> 
</form> 
</body> 
</html> 
+0

Dzięki za proponowane obejście Serapth, ale byłoby to dość trudne do zastosowania na stronie formularza 50 pól, nie sądzisz? –

0

Ewentualnie alternatywa: czy można po prostu użyć stopera, aby określić, kiedy zmieni się wartość pola tekstowego?

0

Będziesz musiał zamazać pole wejściowe i zresetować do niego pole. To będzie wymagało trochę trakcji.

1

Innym Sugerowana obejść ten czas za pomocą sondowania, można pracować go w dokładnie w ten sam sposób, sprawdzając „zmian” do danej dziedzinie. Tweak wartość ankietę (domyślnie 375ms dla własnego smaku).

Użyłem jQuery i jQuery plugin s omeone napisał: https://github.com/cowboy/jquery-dotimeout/

Git Hub SRC https://raw.github.com/cowboy/jquery-dotimeout/master/jquery.ba-dotimeout.js

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>onChange() for Firefox/IE autofil get-around</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script type="text/javascript" src="/~dsloan/js/ba-dotimeout.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      var val; 
      var count=0; // used to illustrate the "poll count" 
         // when focusing on the element and typing 
         // (vs not focused) 

      // set a focus function to poll the input 
      $("#myname").focus(function() { 

       // start polling 
       $.doTimeout('checkname', 375, function() { 
        ++count; 

        // no changes, just exit this poll 
        if($("#myname").val() == val) { 
         return true; 

        // store the value 
        } else { 
         val = $("#myname").val(); 
        } 
        var str; 

        // do stuff here with your field.... 
        if($(document.activeElement) && 
         ($(document.activeElement).attr('id') == 
         $("#myname").attr('id'))) { 

          var len = $("#myname").val().length; 
          if(len == 0) { 
           str = 'Timer called, length 0...'; 
          } else if(len < 2) { 
           str = 'Timer called, length < 2...'; 
          } else { 
           str = 'Timer called, valid!'; 
          } 
        } 

        // show some debugging... 
        $("#foo span").html(str+' (count: '+count+'): '+ 
         $(document.activeElement).attr('id')+ 
         ', val: '+$("#myname").val()); 

        return true; 
       }); 
      }); 

      // set a blur function to remove the poll 
      $("#myname").blur(function() { 
       $.doTimeout('checkname'); 
      }); 

     }); 
    </script> 
    </head> 
    <body> 
    <form action="#" method=post> 
     Name: <input type="text" name="name" value="" id="myname" /> 
     Scooby: <input name="scooby" value="" id="scooby" /> 
     <input type="submit" value="Press Me!" /> 
    </form> 
    <div id="foo"><span></span></div> 
    </body> 
</html> 
29

Firefox 4+ ogień 'oninput' przypadku, gdy jest używany autouzupełniania.
Oto niektóre jQuery, aby ten bardziej zaskarżeniu:

$('#password').bind('input', function(){ /* your code */}); 
+0

thx, stary. To zadziałało dla mnie ... –

+0

Pamiętaj: nie było to obsługiwane przed IE9 i Safari 5.Safari 4 obsługuje 'textinput'. – Blaise

+0

Pytanie dotyczyło konkretnie pytania o FF i działa tam co najmniej tak daleko jak FF3.5, jeśli dobrze pamiętam. –

5

miałem ten sam problem.

Podobno tam jest hasło menedżer debugowania dostępny https://wiki.mozilla.org/Firefox:Password_Manager_Debugging

Więc znalazłem, że dla mnie DOMAutoComplete wydarzenie został wyzwolony i udało mi się dołączyć go bylo pomyslne do pola poprzez wiążą jQuery jak

$('#email').bind('DOMAutoComplete',function() { ... 
+2

To musi być bardzo specyficzne dla przeglądarki ... Byłoby wspaniale zobaczyć więcej informacji na ten temat ... Próbowałem to w Chrome i nie działało –

+0

Działa świetnie w FF30! Może być specyficzny, ale lepszy niż nic. Dziękuję Ci. – wedi

Powiązane problemy