web-dev-qa-db-ja.com

スクロールの誤った入力オートコンプリート位置（クロム）

入力テキストのデフォルトのオートコンプリートに問題があります。スクロールしても、それに従って移動しません。オートコンプリートテキストが入力のすぐ下に留まるようにしたいと思います。これを達成する方法はありますか？ Chrome browserVersión57.0.2987.133

enter image description here

フィドル

<form action="/action_page.php" autocomplete="on">
    First name:<input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    E-mail: <input type="email" name="email" ><br>
    <input type="submit">  
    <div style="height:150px">
    </div>
</form>
javascripthtmlcssgoogle-chrome
24
elarmando

これらのオートコンプリートツールチップは、Google Chrome=のネイティブ実装であり、他のブラウザーと同様に、css/jsで変更することはできません。これにより、問題を解決する2つの可能性が得られます。

マークアップをクリーンアップします。フォームのセマンティックでクリーンなhtmlマークアップは、エラー耐性のために不可欠です。それ以外の場合は、ユーザーがブラウザのデフォルトのオートコンプリートに慣れている場合は、それを使用する機会をユーザーに与えるのに適したソリューションです。さらに、このオートコンプリートスクリプトは、検索やリストからのアイテムの選択など、fornamesまたはlastnamesで機能するようには設計されていません。クリーンでほとんど安全なフォームマークアップは次のようになります jsfiddle ：

オートコンプリートjavascriptプラグインを実装します。ドキュメントに必要な情報を追加することにより、ユーザーにより良いエクスペリエンスを提供するために実装できるスクリプトはたくさんあります。しかし、悲しいことに、これらを名前に使用することは一般的ではありません。

form {
  background: #eee;
  border: 1px solid #ddd;
  padding: 10px;
  max-width: 250px;
}

.form-row {
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 4px;
}

input[type="text"],
input[type="email"]{
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}
<form action="/action_page.php" autocomplete="on">

  <div class="form-row">
    <!-- labels on top of inputs can improve usability alot -->
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
  </div>
  
  <div class="form-row">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
  
  <div class="form-row">
    <label for="email">E-mail adress:</label>
    <input type="email" name="email" id="email">
  </div>
  
  <input type="submit">
</form>
5
Gerrit Halfmann

ブラウザーはオートコンプリートツールチップへのアクセスを提供しないため、囲んでいるコンテナーでスクロールできます。デフォルトの動作では、windowをスクロールするとツールチップが削除されますが、documentのように内部のformコンテナーでは動作が異なります。フォームのonscrollイベント属性のアクティブな入力フィールドからフォーカスを削除して復元することで、ツールチップを削除して、一般的な動作を強制することをお勧めします。

form {
  height: 200px;
  overflow: auto;
}
<form action="/action_page.php" autocomplete="on"
        onscroll="var a = document.activeElement; a.blur(); a.focus();">
    <div style="height:50px"></div>
    First name:<input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    E-mail: <input type="email" name="email" ><br>
    <input type="submit">
    <div style="height:150px"></div>
</form>
10
Javier Rey

HTMLでは、divはブロッキング要素です。したがって、実装したdivがUIコンポーネントの配置をブロックしているようです。

この場合、chromeは、フォーム内の他のUI要素がレンダリングされた後にオートコンプリートを表示する必要があるように解釈しています。そのdivをスパンに変更して、それがレンダリング。

これは、あなたの場合、クロム自身の解釈された振る舞いとして現れます。クロムのレンダリング動作を変更することはできませんが、フォームでオートコンプリートをオフにして、代わりに https://jqueryui.com/autocomplete/ を使用して独自のオートコンプリートリストを有効にすることができます

また、これをお読みください。使用しているまたは参照しているchromeのバージョンには、いくつかの重大な変更がありました。現在のバージョンは60.0.3112.90です。Webブラウザーでは、ご存じのとおり、最新バージョンの方が優れています。

https://github.com/jmoenig/Snap--Build-Your-Own-Blocks/issues/1707

2
Amit

高さ150pxのdivを削除し、入力名のラベルを追加します。これを試してください

    <form action="/action_page.php" autocomplete="on">
      <label for="fname">First name:</label><input type="text" name="fname"><br>
      <label for="lname">Last name:</label><input type="text" name="lname"><br>
      <label for="email"> E-mail: </label><input type="email" name="email" ><br>
       <input type="submit">  
    </form>
1
Risa__B