1

まだ入力フィールドにある間に、テキスト入力の値である文字列の一部をスタイルするにはどうすればよいですか?

要素内に contentedible 属性を持つ要素を使用してこれを実行できることは知っていますが、Google はテキスト型の入力で即時の提案を使用して実行します。入力に現れる最初の補完/提案。

4

2 に答える 2

5

Googleはこのようなものを使用していますが

残念ながら、次のような要素を「開く + 閉じる」ことはできません。input

<input> <span>Bold</span> normal </input>

私の提案は、 Live Demo を使用してこのようにcontenteditable進むことです。

<div id="input" contenteditable="true"><span>This is </span> quite cool!</div>

CSS サンプル:

#input{
  font-family:Arial, Helvetica, sans-serif;
  border:1px solid #ccc;
  background:#eee;
  height:20px;
  width:200px;
  padding:7px;
  color:#888;
}
#input span{
  color:#444;
  font-weight:bold;
}

次に、JS で要素「値」を取得するには、次を使用できます。

alert( this.textContent );

例

于 2013-04-14T06:36:41.820 に答える
0

UX に関して言えば、最高のユーザー エクスペリエンスは、ユーザーが入力しているものを完成させるのではなく、入力の下に提案や完成したオプションを表示することだと思います。

于 2013-04-14T06:18:39.943 に答える