2016-05-05 5 views
1

Chromeが 'autocmplete = "false | off | others"を無視しているChrome自動入力フィールドでこの問題が発生します。私はまた、隠された偽のフィールド、this,thisといくつかを試してみました。手動でフィールドを上書きするJavascriptはalert()とデバッグモードでのみ動作します

$(window).load(function() { 
    console.log('Inside JQuery Window.Load...'); 
    if(document.querySelector("input:-webkit-autofill")!= null) { 
     document.querySelector("input:-webkit-autofill").value = ""; 
    } 
    console.log('Autofill value(Before Alert): ' + document.querySelector("input:-webkit-autofill")); 
    alert('An alert...'); 
    if(document.querySelector("input:-webkit-autofill")!= null) { 
     document.querySelector("input:-webkit-autofill").value = ""; 
    } 
    console.log('Autofill value(After Alert): ' + document.querySelector("input:-webkit-autofill")); 
}); 

:JavaScriptを使用して

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill 
{ 
    -webkit-box-shadow: 0 0 0 1000px white inset !important; 
} 

:フィールドが黄色になると私は、次のCSSルールを使用することを決めたため、パスワードを含むworking.Theされていないようです。ここで

は、上記のスクリプトからのログ出力されます:

Inside JQuery Window.Load... 
XXX:1324 Autofill value(Before Alert): null 
XXX:1329 Autofill value(After Alert): [object HTMLInputElement] 

そして、これは、デバッグモードで実行されている:

Inside JQuery Window.Load... 
XXX:1324 Autofill value(Before Alert): [object HTMLInputElement] 
XXX:1329 Autofill value(After Alert): [object HTMLInputElement] 

私は、次の順列を試してみました:

$('input:-webkit-autofill').each(function(){...}); 
window.document.querySelector("input:-webkit-autofill"); 
<body onload="chromeCheckAutofill();" /> 
<script> 
    function checkAutofill() { 
     if(document.querySelector("input:-webkit-autofill")!= null) { 
      document.querySelector("input:-webkit-autofill").value = ""; 
     } 
    } 
</script> 

これは問題のあるフィールドです:

<input name="MY_REFNO" id="MY_REFNO" style="WIDTH: 180px" maxlength="16" onkeypress="upperAlphanumberHandler(event)" onblur="upperAlphanumberChecker('MY_REFNO')" value="" autocomplete="off"> 

私は間違っていますか?オートフィル試してからGoogle Chromeを回避するために 私はこれをどのように修正すればよい...

+0

はあなたには、いくつかのHTMLコードスニペットを追加することができ、あなたのコード内でタイプ=「テキストボックス」のようなテキストボックスのためのタイプを提供していないと思いますか? – lamp76

+1

'

'は動作しませんでしたか? – Rayon

+0

HTMLとJSを使ってChromeの仕組みを操作しようとしていますか? IE/Edge/Safari/Opera用の個別のソリューションを実装して、自動フィル機能もオーバーライドする予定ですか? – zerohero

答えて

1

:塗りつぶしが読み取り専用の場合

<input type="password" placeholder="Type your password" onfocus="this.removeAttribute('readonly');" readonly /> 

クロームオートフィルを適用しません。

とにかくあなたが値「合格」とname属性を持つ入力フィールドの次のCSSでオートフィルの色(白と黄色)を変更することができます。

input[name="pass"]:-webkit-autofill { 
-webkit-text-fill-color: #838B95 !important; 
webkit-box-shadow: 0 0 0px 1000px white inset !important; //background 
} 

Aが使用するその常に良いのベストプラクティスのヒントできるだけ具体的なCSSセレクタを使用して、他の不要なCSSルールによるCSSのオーバーロードを回避します。 (すなわち、ブートストラップ)。

+0

ここのHTMLはXSLTテンプレートで生成されたbiengです。私がそこで変更したものは、アプリケーション全体に反映されます。私は可能な限り避けたい。 XSLTからフィールドを読み取り専用にすると、問題が発生します... –

+0

CSSルールを追加しました...私はブートストラップを使用しません。 –

+0

しかし、入力フィールドに非常に固有のCSSセレクターを指定することができます。 – lamp76

0

は私が

<input name="MY_REFNO" id="MY_REFNO" style="WIDTH: 180px" maxlength="16" onkeypress="upperAlphanumberHandler(event)" onblur="upperAlphanumberChecker('MY_REFNO')" value="" autocomplete="off"> 
関連する問題