web-dev-qa-db-ja.com

入力フィールドの値の一部をスタイルする方法はありますか？

私は<input>フィールドを使用しており、ユーザーが別の色で入力しているときにフィールドの一部のスタイルを設定したいと考えています。たとえば、<input>にcolor: red;のスタイル宣言があり、そのpartをcolor: blue;に変更したいとします。これが可能な方法はありますか？

（私が疑っているように）ない場合、セマンティックマークアップを維持しながらこの効果をシミュレートする方法についての創造的なアイデアはありますか？

htmlcssformsinput
35
Josh Leitzel

あなたの疑惑は正しいです。スタイルは入力全体にのみ適用されます。

スタイルは要素全体にのみ適用できるため、ソリューションでは必要な色ごとに少なくとも1つの要素が必要です。

ユーザーが変更を加えているポイントに関して、入力フィールドの分割を検討してください。入力には3つのセクションがあります。

  • 変更が適用される時点の前
  • 変更が適用された後
  • その時点で変更が適用されていること

これは、単一の入力要素では実現できません。また、変更が適用されるポイントが変更される可能性があるため、3つの要素でラップされた「入力」の部分も変更されます。ソリューションにはJavaScriptが必要です。

最初に通常の入力要素を含め、必要な色付けをすべて無視する必要があります。 JavaScriptを使用して、入力を適切なコンテナー要素に置き換えます。これは、入力要素を模倣するようにスタイル設定できます。

変更が生じたら、JavaScriptを使用して上記の3つの部門を識別します。それらを適切な要素（スパンが理想的です）で包み、必要に応じて色を付けます。

生成された置換マークアップについて、次の開始点を検討してください。

<div class="input">
  <span class="nonEdited before">foo</span>
  <span class="edited">fizz</span>
  <span class="nonEdited after">bar</span>
</div>

クリック、キーダウン、キーアップの各イベントを使用して、入力の3つの区分を把握し、必要に応じて偽の入力の3つの部分をラップして適用します。

14
Jon Cram

他の人が言ったように、スタイルや静的マークアップを使用してこれを行うことはできません。

おそらく、Flashベースのフォームでそれを行うことができます。

ただし、これが必要な場合は、jQueryを使用して<input>の上に色分けされたテキストでdivをオーバーレイします。

アルゴリズム：

  1. 通常の<input>を使用し、必要なデフォルトのスタイルを使用します。この入力の内容は、ユーザーの操作による場合を除いて変更されることはありません。

  2. jQueryはその<input>を監視します。トリガーワードを検出すると、入力の後に<div>を追加し、必要に応じてスタイル設定されたトリガーワードを入力します。おそらく、単語またはフレーズごとに1つの<div>が最適です。

  3. 次にjQueryは、新しい<div>を絶対にトリガーワードの上に直接配置します。
    前の単語がオーバーレイ<input>にも含まれている可能性があるため、<div>内でトリガーワードのオフセットを取得する必要がない場合もあります-デフォルトのスタイルまたはvisibility: hidden。
    ただし、オーバーレイでトリガーワードのみが必要な場合は、Courierなどの固定幅フォントを使用すると、サブポジショニングに役立ちます。

  4. オーバーレイが<input>の特定の部分をマウスまたはキー操作しようとしているユーザーの邪魔にならないように注意してください。 IEは、おそらく必要以上の<input>をカバーしたくなく、click（）ハンドラーを設定してフォーカスをリレーします。

代替の、ユーザーフレンドリーでシンプルなアプローチ：

ファンキーでユーザーが予期しないことを入力に実行するのではなく、Jakob NielsenやStackOverflowなどのサイトからページを取得してください。

単純なol '<input>を使用しますが、その下には、フォーマットされたテキストが表示されるので、それを表示します。

5
Brock Adams

異なるスタイルのdivをコンテナに並べて、透明な入力でオーバーラップさせることができます。入力エントリに基づいて、スタイル付きdivの幅を変更します。

たとえば、先頭と末尾のスペースの入力背景に色を付けるには：

<div class="bckg-container">
  <div id="bckg-leading" class="bckg spaces">
  </div>
  <div id="bckg-middle" class="bckg">
  </div>
  <div id="bckg-trailing" class="bckg spaces">
  </div>
  <br style="clear: left;" />
</div>
<input id="inpt" type="text" placeholder="Add leading/trailing spaces" maxlength="20" />

コンテナ内の3つのdivは、入力の変更に応じて幅を変更します。

Jsfiddleの実際の例を確認してください http://jsfiddle.net/TalhaAwan/ywyw4qq5/

3
Talha Awan

これは（多大な労力と）contentEditable属性が存在するdivで実現できます。これは、ほとんどのWebベースのWYSIWYGエディターが入力の豊富なフォーマットを実現する方法です。詳細はこちらをご覧ください： http://ajaxian.com/archives/on-browser-wysiwyg

3
Mike Sherov

あなたはそれをJavaScriptで編集することでそれを行うことができるかもしれません（純粋なhtml/cssでそれができない場合）：

http://www.appelsiini.net/projects/jeditable/default.html

そのjQueryプラグインはhtml入力フィールドを使用しないため、入力のさまざまな部分のスタイルを設定できる可能性があります。入力のスタイル設定に使用できるコールバック用のフックがいくつかあります。それがアイデアとして役立つことを願っています。

1
Mark Pope

その入力と実際の入力を模倣するラベルを非表示にしてから、ラベルタグ（色分けされたスパンなど）の多くのことを実行できます。

0
Botea Florin