7 
<input type="text" list="numbers">

<datalist id="numbers">
    <option value="110">
    <option value="111">
    <option value="112">
    <option value="113">
    <option value="114">
    <option value="115">
</datalist>

http://jsfiddle.net/shvPB/

シナリオ:
1. ユーザーが任意の値のオプションまたは下向き/上向き矢印の書き込みを開始すると、ドロップダウン リストにオプションが提案されます。
2. ユーザーは、オプションの 1 つをマウスクリックまたはエンタークリックします。重要なのは、リストを上下にスクロールできることです。
3. ユーザーが入力フィールドの外側をクリックします。入力フィールドはもうフォーカスされていません。
4. ユーザーが選択を変更したいので、入力フィールドをクリックしましたが、オプションが表示されなくなりました。

ステップ 4 でオプションを表示するにはどうすればよいですか?

4

1 に答える 1

1

これは特定のソリューションですが、ニーズに合わせて機能するはずです...（jQueryを使用）...：

概要: 独自の select のような要素を作成し、そこから値をコピー<datalist>します。次に、2 つのイベントを入力にバインドします: フォーカス/ぼかしで表示/非表示。そして、すべてのオプションのような要素にイベントを追加して、click() の値を入力に渡します。のドロップダウンがない場合に表示される保存要素になります<datalist>。注意が必要な点が 1 つあります。フォーカスアウト(blur) イベントがクリック イベントよりも早く発生するため、setTimeout によって非表示になります。

これまでに作成されたフィドル: http://jsfiddle.net/xPx2Z/3/ :) /*chrome look-a-like ドロップダウン */

ところで：「true」<select>を開いたままfocus()入力を編集することはできないため、<select>要素を使用したソリューションは良くありません。だから私は答えを少し更新しました:)

于 2013-08-28T10:03:59.240 に答える