Chromeでオートコンプリートを無効にせずにフォームの自動入力を無効にします
特定の<input>sでChromeの自動入力機能を無効にして、ページの読み込み時に自動的に読み込まれないようにするにはどうすればよいですか？
同時に、オートコンプリートを有効にしておく必要があるため、ユーザーは入力をクリックするか入力することで提案のリストを表示できます。これはできますか？
編集：必要であると感じたり、ソリューションを簡単にしたい場合は、プレーンなJavaScriptまたはjQueryを自由に使用してください。
あなたが望む魔法は次のとおりです。
autocomplete="new-password"
Chromeはautocomplete="off"とautocomplete="false"を意図的に無視します。ただし、新しいパスワードフォームが自動入力されないように、特別な句としてnew-passwordを挿入します。
上記の行をパスワード入力に入力すると、フォーム内の他のフィールドを編集できるようになり、パスワードは自動入力されません。
少し遅れましたが、ユーザーが新しいパスワードを入力する必要があるサインアップ/登録ページなどのページに役立つ、私の簡単なソリューションです。
<form method="post">
<input type="text" name="fname" id="firstname" x-autocompletetype="given-name" autocomplete="on">
<input type="text" name="lname" id="lastname" x-autocompletetype="family-name" autocomplete="on">
<input type="text" name="email" id="email" x-autocompletetype="email" autocomplete="on">
<input type="password" name="password" id="password_fake" class="hidden" autocomplete="off" style="display: none;">
<input type="password" name="password" id="password" autocomplete="off">
</form>
Chromeは2つのパスワード入力を検出し、パスワードフィールドに自動入力しません。ただし、id = "password_fake"フィールドはCSSによって非表示になります。そのため、ユーザーには1つのパスワードフィールドのみが表示されます。
また、追加の属性「x-autocompletetype」を追加しました。これは、chrome実験固有の自動入力機能です。私の例では、chromeパスワードフィールドではなく、名、姓、電子メールアドレス。
修正：ブラウザの自動入力を禁止
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
更新：Mobile Safariはフィールドにカーソルを設定しますが、仮想キーボードは表示しません。新しい修正は以前と同様に機能しますが、仮想キーボードを処理します。
<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
this.removeAttribute('readonly');
// fix for mobile safari to show virtual keyboard
this.blur(); this.focus(); }" />
ライブデモ https://jsfiddle.net/danielsuess/n0scguv6/
// UpdateEnd
説明空白またはロード時ウィンドウ関数を埋める代わりに、このスニペットは、読み取り専用モードを設定し、ユーザーがこの入力フィールドにフォーカスしている場合は書き込み可能に変更することで機能します（フォーカスには、マウスクリックとフィールドのタブ移動が含まれます）。
JQueryは不要、純粋なJavaScript。
多くの苦労の末、私はあなたが想像できるより簡単な解決策であることを発見しました：
autocomplete="off"の代わりに、単にautocomplete="false"を使用してください;）
これを試して...
$(document).ready(function () {
$('input').attr('autocomplete', 'false');
});
今日、奇妙なchrome自動入力動作に遭遇しました。「embed」および「postpassword」（ログインおよびパスワードを入力）と呼ばれるフィールドで有効になりました。オートコンプリートがオフに設定されています。
説明されている方法はどれも機能していないようです。別の答えからの方法はどれもうまくいきませんでした。 Steeleの答えに基づいて自分のアイデアを思いつきました（実際にはうまくいったかもしれませんが、アプリケーションには固定投稿データ形式が必要です）：
実際のパスワードの前に、これらの2つのダミーフィールドを追加します。
<input type='text' style='display: none'>
<input type='password' style='display: none'>
私のフォームのオートフィルを完全に無効にしたのは、この1つだけです。
そのような基本的な動作を無効にすることは、そのハードでハッキーなのは残念です。
Chromeページのロード時に自動的に自動入力してこれをテストすることはできませんが、autocomplete="off"をフィールドに追加し、ロード時に属性を削除します。
$(window).load(function() { // can also try on document ready
$('input[autocomplete]').removeAttr('autocomplete');
});
これは役立つかもしれません： https://stackoverflow.com/a/4196465/683114
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});
}
ロード時のように見え、オートフィルを使用してすべての入力を検出し、outerHTMLを追加して元のファイルを削除しますが、値と名前を保持します（IDなどを保持するために簡単に変更できます）
これにより自動入力テキストが保持される場合は、単に設定できます
var text = ""; /* $(this).val(); */
これが投稿された元のフォームから、オートコンプリートを保持すると主張します。 :)
幸運を！
autocomplete="off"現在作業中の入力Chrome V44（およびCanary V47）
1つの解決策は、入力に空白文字を自動入力し、フォーカスを明確にすることです。
例： http://nfdb.net/autofill.php
<!doctype html>
<html>
<head>
<title>Autofill Test</title>
<script>
var userfield;
// After the document has loaded, manipulate DOM elements.
window.addEventListener('load', function() {
// Get the username field element.
userfield = document.getElementById('user');
// Listen to the 'focus' event on the input element.
userfield.addEventListener('focus', function() {
// Checks if the value is the EM space character,
// and removes it when the input is recieves focus.
if (this.value == '\u2003') this.value = ''
}, false);
// Listen to the 'blur' event on the input element.
// Triggered when the user focuses on another element or window.
userfield.addEventListener('blur', function() {
// Checks if the value is empty (the user hasn't typed)
// and inserts the EM space character if necessary.
if (this.value == '') this.value = '\u2003';
}, false);
}, false);
</script>
</head>
<body>
<form method="GET" action="">
<input id="user" name="username" type="text" value=" "/><br/>
<input name="password" type="password" value=""/><br/>
<input type="submit" value="Login">
</form>
</body>
</html>
これにより、ブラウザによるフィールドの自動入力は停止されますが、自動入力は許可されます。
ページの読み込み後にフォーム入力をクリアする別の例を次に示します。この方法の利点は、入力に空白文字が含まれないことです。欠点は、自動入力された値が数ミリ秒間表示される可能性がわずかにあることです。
<!doctype html>
<html>
<head>
<title>Autofill Test</title>
<script>
var userfield, passfield;
// Wait for the document to load, then call the clear function.
window.addEventListener('load', function() {
// Get the fields we want to clear.
userfield = document.getElementById('user');
passfield = document.getElementById('pass');
// Clear the fields.
userfield.value = '';
passfield.value = '';
// Clear the fields again after a very short period of time, in case the auto-complete is delayed.
setTimeout(function() { userfield.value = ''; passfield.value = ''; }, 50);
setTimeout(function() { userfield.value = ''; passfield.value = ''; }, 100);
}, false);
</script>
</head>
<body>
<div>This form has autofill disabled:</div>
<form name="login" method="GET" action="./autofill2.php">
<input id="user" name="username" type="text" value=""/><br/>
<input id="pass" name="password" type="password" value=""/><br/>
<input type="submit" value="Login">
</form>
<div>This form is untouched:</div>
<form name="login" method="GET" action="./autofill2.php">
<input name="username" type="text" value=""/><br/>
<input name="password" type="password" value=""/><br/>
<input type="submit" value="Login">
</form>
</body>
</html>
私は最近この問題に直面しましたが、フィールドに事前入力できるため簡単な解決策はありませんでしたが、readyイベントでパスワードタイプを設定することで思いついたエレガントなハックを共有したいと考えました。
入力フィールドを作成するときに、入力フィールドをパスワードタイプとして宣言しないでください。ただし、準備が整ったイベントリスナーを追加して追加します。
function createSecretTextInput(name,parent){
var createInput = document.createElement("input");
createInput.setAttribute('name', name);
createInput.setAttribute('class', 'secretText');
createInput.setAttribute('id', name+'SecretText');
createInput.setAttribute('value', 'test1234');
if(parent==null)
document.body.appendChild(createInput);
else
document.getElementById(parent).appendChild(createInput);
$(function(){
document.getElementById(name+'SecretText').setAttribute('type', 'password');
});
};
createSecretTextInput('name', null);
var fields = $('form input[value=""]');
fields.val(' ');
setTimeout(function() {
fields.val('');
}, 500);
これまでのところ、私はこれが機能していることを発見しました。クロムの自動入力後にアクションが完了するまで1msのタイムアウトを設定する必要があります..
$(window).on('load', function() {
setTimeout(function(){
$('input[name*=email],input[name*=Password]').val('-').val(null);
},1);
});
この関数をchrome自己完結型発火、または再宣言するために追加する方法があるかどうか疑問に思っています
最も簡単な解決策は、ユーザー名フィールドに「」の値を指定することです（「ユーザー名」と呼ぶことができます）。
検証するフォームの通常の場合のように、ユーザーが入力した値で値を設定できる場合は、値が設定されていないときに ''を指定します。 PHPでは、
if(trim($username) == ''){$username = ' ';}
<input type='text' value = '$username' name = 'Username' />
ユーザー名とパスワードのオートコンプリートは、パスワードがどれだけ曖昧であるかに関係なく、コンピューターにアクセスするすべてのユーザーにすべてのアカウントへのアクセスを効果的に与えると思います...
美しいソリューションではありませんが、Chrome 56：
<INPUT TYPE="text" NAME="name" ID="name" VALUE=" ">
<INPUT TYPE="password" NAME="pass" ID="pass">
値のスペースに注意してください。その後：
$(document).ready(function(){
setTimeout("$('#name').val('')",1000);
});
私のソリューションはdsuessユーザーソリューションに基づいていますが、IEでは動作しませんでした。入力するためにテキストボックスでもう一度クリックする必要があったためです。 Chromeのみ：
$(window).on('load', function () {
if (navigator.userAgent.indexOf("Chrome") != -1) {
$('#myTextBox').attr('readonly', 'true');
$('#myTextBox').addClass("forceWhiteBackground");
$('#myTextBox').focus(function () {
$('#myTextBox').removeAttr('readonly');
$('#myTextBox').removeClass('forceWhiteBackground');
});
}
});
あなたのCSSにこれを追加してください：
.forceWhiteBackground {
background-color:white !important;
}
Chromeパスワードマネージャーは、type="password"の入力要素を探し、保存されたパスワードを入力します。また、autocomplete="off"プロパティも無視します。
ここに最新の修正がありますChrome（バージョン40.0.2181.0 canary）：
<input name="password">
JS：
setTimeout(function() {
var input = document.querySelector("input[name=password]");
input.setAttribute("type", "password");
}, 0)
パーティーに少し遅れました...しかし、これはjQueryで簡単に行えます。
$(window).on('load', function() {
$('input:-webkit-autofill').each(function() {
$(this).after($(this).clone(true).val('')).remove();
});
});
長所
- 自動入力テキストと背景色を削除します。
- フィールドでオートコンプリートを保持します。
- 入力要素にバインドされたイベント/データを保持します。
短所
- ページの読み込み時に自動入力フィールドのクイックフラッシュ。
私はsetTimeoutを使用したり、奇妙な一時的な入力さえしたくないです。それで私はこれを思いつきました。
パスワードフィールドタイプをテキストに変更するだけです
<input name="password" type="text" value="">
そして、ユーザーがその入力に焦点を合わせたとき、それを再びパスワードに変更します
$('input[name=password]').on('focus', function (e) {
$(e.target).attr('type', 'password');
});
最新のChrome（バージョン54.0.2840.71（64ビット））を使用した動作
これが私が発見した最新のソリューションです。これにより、Googleがフィールドに入力し、何かを入力する前に黄色で強調表示されなくなります。基本的に、フィールドに「display：none」を配置すると、Googleはそれを無視して次のフィールドに移動するのに十分なほどスマートです。 「visibility：hidden」と入力すると、計算を妨げるように見えるフォームのフィールドとしてカウントされます。 JavaScriptは必要ありません。
<form method='post'>
<input type='text' name='u' size='16'/>
<input type='password' name='fake' size='1' style='width:1px;visibility:hidden'/><br />
<input type='password' name='p' size='16'/>
</form>