7

私はウェブ上で少し狩りをしましたが、これに対する具体的な答えをまだ見つけていません. 編集不可能なデフォルトのテキストを含むテキスト フィールドを持つことは可能ですか?

たとえば、ユーザーが電話番号を入力する必要があるとします。彼らが見るものは次のとおりです。

Input Phone Number: ***-***-****

好きなスターを編集できます。ただし、フィールドが完全に空の場合でも、ダッシュを削除する方法はありません。readonly入力領域のとタグを見てきましたdisabledが、これらはフィールド全体を無効にします。

入力フィールドにデフォルトで設定した文字を変更せずに、ユーザーが情報を入力できるようにしたい。

実験する必要がある場合は、ダミーコードを次に示します。

<!doctype HTML>
<html>
<body>
    <section>
         <article>
             <label>Phone Number Entry: </label>
             <input type="tel" name="phone" placeholder="123-456-7890" 
                                        onkeypress='eval(event)' required/>
          </article>
     </section>
</body>
</html>
4

4 に答える 4

1

単なる提案ですが、編集可能領域に 3 つの個別のテキスト入力を使用し、いくつかの CSS を使用してそれらを単一の入力として表示することができます。そして、おそらく完全な値を保持するための隠し入力が必要です。

別の方法は、キーストロークとカーソル位置を追跡する必要がある (おそらく厄介な) JavaScript ソリューションです。

于 2013-07-24T19:25:01.813 に答える
0

純粋な HTML/CSS では不可能です。これには Javascript が必要です。この機能をサポートする優れた JS プラグインがいくつかあります。私は通常、meiomaskまたはinputmaskを使用します。ユーザーの入力を数字のみ (または任意のもの) に制限する機能が追加されます。

どちらも jQuery に依存していますが、もちろん、JavaScript で独自のソリューションを作成することもできます。

3 つの異なる入力を使用し、それらを 1 つの大きな入力としてスタイルするという提案された方法は、IMO の最適なソリューションではありません。ユーザーは (マウスまたはタブで) フィールドを切り替える必要がありますが、これは単一のフィールドのように見えて混乱を招きます。ひどいUX！JS を追加してフィールドを自動的に切り替えることもできますが、JS を使用する場合は入力マスクを使用します。そして、サーバー側で 3 つのフィールドを処理するための余分な作業についてはまだ話していません...

于 2013-07-24T19:34:08.327 に答える