最後に、まともな解決策を見つけたと思います。Chrome でドロップダウンがどのように機能するかを理解するのに役立ちました :) 基本的に、ドロップダウンは、入力にフォーカスしたとき、および Chrome がメモリに持っているものと一致するエントリを入力しているときにマウス ダウン イベントを生成したときに表示されます。それを念頭に置いて、「名前」、「電子メール」などのデフォルト名がある場合、Chrome は特定の入力に対してそれを行うので、ドロップダウンが表示されるときに名前を削除し、後で再度追加する必要があります。 :) オートコンプリート属性をオフにするだけで機能するソリューションを使用したかったのです。理にかなっていると思いました。これはコードです：
解決策 1
jQuery('body').on('mousedown','[name="name"][autocomplete="off"], [name="email"][autocomplete="off"]',function(e){
e.stopImmediatePropagation();
if(typeof this.currentName =="undefined")
this.currentName=jQuery(this).attr('name');
jQuery(this).attr('name','');
});
jQuery('body').on('blur','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
jQuery(this).attr('name',this.currentName);
});
解決策 2 (私のお気に入り)
上記の解決策は、フォーカス (ぼかし) を削除するまで入力の名前を削除し、その瞬間に元の名前に戻します。しかし、入力中に名前属性を介して入力にアクセスすることに関心がある場合があります。つまり、各入力の直後に名前を戻す必要があります。このソリューションは、基本的に最初のソリューションに基づいています。この場合、キーダウンで名前を追加し、キーアップで元に戻します。これは、「オートコンプリートをオフにする」動作との互換性のために、よりきちんとしていると思います。とにかく、これはコードです：
jQuery('body').on('mousedown keydown','[name="name"][autocomplete="off"], [name="email"][autocomplete="off"]',function(e){
e.stopImmediatePropagation();
if(typeof this.currentName =="undefined")
this.currentName=jQuery(this).attr('name');
jQuery(this).attr('name','');
});
jQuery('body').on('blur keyup','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
if(typeof this.currentName !="undefined")
jQuery(this).attr('name',this.currentName);
});
解決策 1 と 2 では、入力名が「name」と「email」の場合を取り上げただけであることに注意してください。この属性が Chrome にドロップダウンを生成させるその他のケースでは、マウス ダウン イベントのセレクターに追加する必要があります。
解決策 3
このソリューションはもっと面倒です。私たちが修正しようとしている動作が、「名前、電子メールなど」のような特定の名前の入力に基づいているだけであることに気付きませんでした。このソリューションのアプローチは、アプリオリにわからない他の名前を Chrome が表示する場合のためのものでした。それは非常に一般的な解決策になります。基本的に、削除キーを押したときに小さなちらつきが発生する可能性があるため、他の2つほど好きではありません. 以下にその説明をします。
入力を2回クリックするとドロップダウンが表示されますが、入力に初めて焦点を合わせたときの最初のクリックでは表示されないことがわかりました。このすべての要素に対して「マウスダウン」イベントをバインドします。ここで、ハンドラーは基本的に、入力に既にフォーカスされているかどうかを検出し、別の「マウスダウン」を検出した場合は、.blur() を強制し、その後 .focus() を強制して防止します。フォーカスされると、2 回目のクリックでドロップダウンが表示されます。ここに私が使用したコードがある場合に備えて、それが明確であることを願っています：
jQuery('body').on('mousedown','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
if(jQuery(this).is(':focus')) {
jQuery(this).blur();
jQuery(this).focus();
}
});
一方、Chrome の候補と一致する場合に備えて、入力中にドロップダウンが表示されないようにするためには、少し注意が必要です。ユーザーが入力している間、入力のデフォルトの動作を置き換えることにしました。ドロップダウンはマウス ダウン時の入力を評価するので、英数字、スペースなどのデフォルトの動作を防止します。唯一の問題は、Command、Ctrl、および削除です。この場合、マウスアップ時のイベントもバインドする必要がありました。最初の 2 つのケースではデフォルトの動作が許可されるため、コピー、貼り付け、またはすべてを選択できます。削除の場合、デフォルトの動作を許可する必要がありますが、文字を削除した後に入力が Chrome の提案と一致すると、再びドロップダウンが表示されました。この場合、ぼかしとフォーカスの同じトリックを使用する必要がありました。これに関して私が見つけた唯一の不都合は、キーアップ時の動作をキャンセルしていて、Chrome がキーダウン時にそれを表示しようとするため、小さなちらつきがあることです。とにかく、これが私にできる最善のことです。おそらく、ある時点で文字のフィルタリングが必要になるでしょう。今のところ、条件がより理にかなっていると付け加えただけです。これはコードの 2 番目の部分です。
jQuery('body').on('keydown','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
var ctrlKey = 17,cmKey = 91;
var charCode = e.which || e.keyCode;
if(charCode!=16 && this.commandDown != true && this.ctrlDown != true && ((charCode>47 && charCode<58)||(charCode>64 && charCode<91)||(charCode>96 && charCode<123)||charCode==0 || charCode==32)){
e.preventDefault();
var charStr = String.fromCharCode(charCode);
if(!e.shiftKey)
charStr = charStr.toLowerCase(charStr);
$(this).val($(this).val() + charStr);
}else{
if (charCode == cmKey) this.commandDown = true;
if (charCode == ctrlKey) this.ctrlDown = true;
}
});
jQuery('body').on('keyup','[autocomplete="off"]',function(e){
e.stopImmediatePropagation();
var allowed=[8];//Delete
var ctrlKey = 17,cmKey = 91;
var charCode = e.which || e.keyCode;
if (charCode == cmKey) {this.commandDown = false};
if (charCode == ctrlKey) {this.ctrlDown = false};
if(allowed.indexOf(charCode)>=0 || (this.commandDown!=false && this.ctrlDown!=false)){
jQuery(this).blur();
jQuery(this).focus();
}
私が言ったように、この解決策はもっと面倒です。特定の入力名に対してドロップダウンが表示されることに気付くまで、これは私が最初に使用したものでした。
たくさん書いてすみません、すべてが明確であることを確認したかっただけです。お役に立てば幸いです。
