2009-05-14 11 views
13

私は、ajaxオートコンプリートフォームの入力タグのイベントを変更するために購読しようとしています。これらの変更イベントは、ユーザーがFireFoxからのオートコンプリート提案をクリックすると発生しません。FireFoxのオートコンプリート入力変更イベントを取得する

私はIEの修正を見ましたが、FireFoxは修正しませんでした。この動作を確認することができますhere

手順を再作成する: ボックスのいずれかの入力し、[送信]をクリックします。

同じボックスにもう一度値を入力してください。

入力ボックスの下に自動補完候補ボックスが表示されます。提案をクリックしても変更イベントは発生しません(クリックイベントは発生しません)。

現在、私の唯一の選択肢は、このフィールドで自動補完を無効にすることです。

+0

「正しい答え」のマークをJethroの答えに切り替えてください。正しい答えとしてマークした答えのハックは必要ありません! –

答えて

6

それはあなたがより良い感じになっている場合、それはknown bug

提案回避策です:ポーリングを使用して(ない鉱山、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

提案された回避策Serapthに感謝しますが、50フィールドのフォームページに適用するのはかなり難しいでしょうか? –

0

おそらく代替:タイマーを使用して、テキストボックスの値が変更されたことを通知できますか?

0

入力フィールドをぼかして、フォーカスをそのフィールドにリセットする必要があります。しかしそれは少しトリックを必要とするだろう。

1

周りの別の推奨作業からこの時間、あなたはそれを作業することができます正確に あなたのフィールドに "変更"をチェックする同じ方法で、ポール値を微調整してください( デフォルトは375msです)

私はjQueryとjqueryプラグインを使っていますomeoneは書きました: https://github.com/cowboy/jquery-dotimeout/

GitのハブのSrc:オートコンプリートが使用されているイベント 'oninput' 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+火を。
は、ここではいくつかのjQueryのは、これはより実用的にするためにです:

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

thx、man。それは私のために働いた... –

+0

注意:これはIE9とSafari 5までサポートされていませんでした。Safari 4は 'textinput'をサポートしました。 – Blaise

+0

質問は具体的にはFFについて尋ねていましたが、これは少なくとも私が正しく覚えていれば、FF3.5ほど遠いところで働いています。 –

5

私は同じ問題を抱えていました。

はどうやら、 https://wiki.mozilla.org/Firefox:Password_Manager_Debugging

可能なパスワードマネージャのデバッグがあるので、私は私のためにDOMAutoCompleteイベントがトリガしまったと 私は

のようにjQueryのバインドを経由してフィールドにsucessfulyそれを添付して管理していることを発見しました
$('#email').bind('DOMAutoComplete',function() { ... 
+2

これは非常にブラウザ固有のものでなければなりません...これはChromeで動作しませんでした –

+0

FF30でうまく動作します!特定のものだが、何よりも優れているかもしれない。ありがとうございました。 – wedi