web-dev-qa-db-ja.com

ブラウザのフォーム入力と入力強調表示をHTML / CSSでオーバーライドする

サインインとサインアップの2つの基本的なフォームがあります。どちらも同じページにあります。今、私はフォームの自動入力のサインに問題はありません、 ただし、サインアップフォームは自動入力にも対応しており、気に入らないようです。

また、フォームスタイルには黄色の背景が表示されますが、これをオーバーライドすることはできず、インラインCSSを使用してこれを行うことは望ましくありません。黄色にならないようにする方法 および（おそらく）自動充填？前もって感謝します！

htmlcssinputautofill
122
casraf

オートコンプリートには、次を使用できます。

<form autocomplete="off">

着色問題に関して：

スクリーンショットから、webkitが次のスタイルを生成することがわかります。

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

1）#idスタイルは.classスタイルよりもさらに重要なので、次のmayが機能します：

#inputId:-webkit-autofill {
    background-color: white !important;
}

2）それがうまくいかない場合は、プログラムでjavascriptを介してスタイルを設定しようとすることができます

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

3）それが機能しない場合、 あなたは運命だ:-) これを考慮してください：これは黄色を隠すことはありませんが、テキストは再び読みやすくなります。

input:-webkit-autofill {
        color: #2a2a2a !important; 
    }

4）css/javascriptソリューション：

css：

input:focus {
    background-position: 0 0;
}

また、次のjavascriptをonloadで実行する必要があります。

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

例えば：

<body onload="loadPage();">

幸運を ：-）

5）上記の作業で入力要素を削除してクローンを作成してから、クローン要素をページに戻します（Safari 6.0.3で機能します）。

<script>
function loadPage(){

    var e = document.getElementById('id_email');
    var ep = e.parentNode;
    ep.removeChild(e);
    var e2 = e.cloneNode();
    ep.appendChild(e2);

    var p = document.getElementById('id_password');
    var pp = p.parentNode;
    pp.removeChild(p);
    var p2 = p.cloneNode();
    pp.appendChild(p2);
}

document.body.onload = loadPage;
</script>

6）から ここ ：

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);
        });
    });
}
142
Phil Rykoff

「強力な」内部シャドウでそれをだます：

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
}
183
Tamás Pap

このCSSルールを追加すると、黄色の背景色が消えます。 :)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
23
MCBL
<form autocomplete="off">

ほとんどすべての最新のブラウザはそれを尊重します。

13
Jason Kester

2時間の検索の後、Google Chromeはまだ黄色を何とか上書きしているようですが、修正が見つかりました。ホバー、フォーカスなどにも機能します。 !importantを追加するだけです。

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

これにより、入力フィールドから黄色が完全に削除されます

13
don

また、ブラウザが追跡しないように、フォーム要素の名前属性を生成されたものに変更することもできます。ただし、firefox 2.x +とgoogle chromeは、リクエストURLが同じ場合、それほど問題はないようです。基本的に、サインアップフォームにソルトリクエストパラメーターとソルトフィールド名を追加してみてください。

ただし、autocomplete = "off"は依然として一番の解決策だと思います:)

3
Dmitriy Likhten

<form>要素にコードがあるだけで、ブラウザのオートコンプリートがまだオートコンプリートする場合があります。

<input>要素にも入れてみましたが、うまく機能しました。

<form autocomplete="off">  AND  <input autocomplete="off">

ただし、この属性のサポートは終了しています。お読みください https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

https://bugzilla.mozilla.org/show_bug.cgi?id=956906

私が見つけた別の回避策は、入力フィールド内のプレースホルダーを取り出して、それが電子メール、ユーザー名、または電話フィールドであることを示唆しています（つまり、「あなたの電子メール」、「電子メール」など）

enter image description here

これにより、ブラウザがフィールドの種類を知らないため、オートコンプリートを試行しません。

3
andstud.io

HTML5の時点で（autocomplete="off"を介して）自動補完を無効にできますが、ブラウザの強調表示を上書きすることはできません。 CSSで::selectionをいじってみることもできます（ほとんどのブラウザでは機能するためにベンダープレフィックスが必要です）が、おそらくそれも役に立たないでしょう。

ブラウザベンダーがベンダー固有のオーバーライド方法を具体的に実装していない限り、ユーザーのサイトのスタイルシートをオーバーライドすることを既に意図しているスタイルについては何もできません。これらは通常、スタイルシートが適用された後に適用され、! importantオーバーライドも無視します。

3
Alan Plum

これにより、SafariとChromeの両方の問題が修正されます

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}
2
Arjan

入力フィールドにある場合は、「黄色を解除」しようとしています...

  1. Cssで背景色を設定します... #ccc（明るい灰色）とします。
  2. Value = "sometext"を追加します。これにより、フィールドが一時的に "sometext"で埋められます。
  3. （オプション）実際のテキストを挿入するときに「sometext」を明確にするために、小さなjavascriptを追加します。

したがって、次のようになります。

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />
1
whitehorse

すべてのブラウザ向けのシンプルなJavaScriptソリューション：

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

入力を複製し、属性をリセットし、元の入力を非表示にします。 iPadにはタイムアウトが必要です

0
Mite

ブラウザはパスワードタイプフィールドを検索するため、別の回避策はフォームの先頭に非表示フィールドを含めることです。

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
0
Kt Mack

オートコンプリートオフは、最新のブラウザーではサポートされていません。私が見つけたオートコンプリートを解決する最も簡単な方法は、HTMLとJSの小さな追跡でした。最初に行うことは、HTMLの入力のタイプを「パスワード」から「テキスト」に変更することです。

<input class="input input-xxl input-watery" type="text" name="password"/>

ウィンドウのロード後にオートコンプリートが開始されます。それで大丈夫です。しかし、フィールドのタイプが「パスワード」ではない場合、ブラウザはどのフィールドに入力する必要があるかを知りませんでした。そのため、フォームフィールドにはオートコンプリートはありません。

その後、たとえば、イベントフォーカスをパスワードフィールドにバインドします。バックボーンで：

'focusin input[name=password]': 'onInputPasswordFocusIn',

onInputPasswordFocusInで、簡単なチェックにより、フィールドのタイプをパスワードに変更します。

if (e.currentTarget.value === '') {
    $(e.currentTarget).attr('type', 'password');
}

それだけです！

PD：無効なJavaSciprtではこのことは機能しません

2018年のUPD。いくつかの面白いトリックも見つかりました。入力フィールドにreadonly属性を設定し、フォーカスイベントで削除します。最初にブラウザーがフィールドを自動入力しないようにし、2番目にデータの入力を許可します。

0
volodymyr3131

多くのことを試した後、自動入力フィールドを無効にし、それらを重複したものに置き換える実用的なソリューションを見つけました。付随するイベントを失うことなく、別の（少し長めの）ソリューションを思い付きました。

「入力」イベントごとに、関連するすべての入力に「変更」イベントを迅速に付加します。それらが自動入力されたかどうかをテストします。はいの場合、新しいテキストイベントをディスパッチします。これにより、ユーザーに値が変更されたとブラウザに思わせ、黄色の背景を削除できるようにします。

var initialFocusedElement = null
  , $inputs = $('input[type="text"]');

var removeAutofillStyle = function() {
  if($(this).is(':-webkit-autofill')) {
    var val = this.value;

    // Remove change event, we won't need it until next "input" event.
    $(this).off('change');

    // Dispatch a text event on the input field to trick the browser
    this.focus();
    event = document.createEvent('TextEvent');
    event.initTextEvent('textInput', true, true, window, '*');
    this.dispatchEvent(event);

    // Now the value has an asterisk appended, so restore it to the original
    this.value = val;

    // Always turn focus back to the element that received 
    // input that caused autofill
    initialFocusedElement.focus();
  }
};

var onChange = function() {
  // Testing if element has been autofilled doesn't 
  // work directly on change event.
  var self = this;
  setTimeout(function() {
    removeAutofillStyle.call(self);
  }, 1);
};

$inputs.on('input', function() {
  if(this === document.activeElement) {
    initialFocusedElement = this;

    // Autofilling will cause "change" event to be 
    // fired, so look for it
    $inputs.on('change', onChange);
  }
});
0
Ernests Karlsons

リンクしたスクリーンショットは、WebKitがこれらの要素にセレクターinput:-webkit-autofillを使用していることを示しています。これをCSSに入れてみましたか？

input:-webkit-autofill {
    background-color: white !important;
}

それが機能しない場合、おそらく何も機能しません。これらのフィールドは、ユーザーに個人情報（ユーザーの自宅の住所など）が自動入力されたことをユーザーに警告するために強調表示されます。

0
benzado

formエレメントには、autocompleteに設定できるoff属性があります。 CSSの場合、プロパティの後の!importantディレクティブは、プロパティがオーバーライドされないようにします。

background-color: white !important;

IE6だけがそれを理解していません。

私があなたを誤解した場合、あなたが役に立つと思うoutlineプロパティもあります。

0
zneak

Googleツールバーのオートコンプリート機能がJavaScriptで無効になっているのを見ました。他の一部の自動入力ツールで動作する場合があります。オートコンプリートに組み込まれたブラウザーで役立つかどうかはわかりません。

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);

  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "")
      event.srcElement.style.backgroundColor = "";
  }//-->
</script>
0
Adam

私は非常に多くのスレッドを読み、非常に多くのコードを試しました。すべてのものを収集した後、ログインフィールドとパスワードフィールドをきれいに空にし、背景を白にリセットする唯一の方法は次のとおりです。

$(window).load(function() {
    setTimeout(function() {
        $('input:-webkit-autofill')
            .val('')
            .css('-webkit-box-shadow', '0 0 0px 1000px white inset')
            .attr('readonly', true)
            .removeAttr('readonly')
        ;
    }, 50);
});

コメントをお気軽に、私はあなたがいくつかを見つけた場合、すべての機能強化に開放されています。

0
TwystO