javascript - フォーカス時にテキストボックスのデフォルト値を保持

Question

デフォルト値「DE」で Web サイトに入力フィールド (テキスト) を作成しました。今、私は次の問題を抱えています。

<input type="text" id="iban" value="DE" />

ユーザーがテキストボックスをクリックしたとき、デフォルト値の「DE」は削除されるべきではなく、ユーザーはテキストボックスのデフォルト値の後にのみ数字を追加する必要があります。テキストボックスのデフォルト値を読み取り専用にするjs関数を探しています。ユーザーはデフォルト値を削除しないでください。

これが可能な場合、どのように機能しますか?

score 5 · Accepted Answer

値の一部を読み取り専用にすることはできません...しかし、単純なソリューション(javascriptなし)を使用したい場合は、2つの入力を使用できます:

<input type="text" id="iban-prefix" value="DE" readonly/><input type="text" id="iban-value"/>

css を使用してそれらを配置し、サーバー側で 2 つの値を連結するだけです。

また：

JavaScript の解決策: フォームで「onsubmit」イベントを使用して JavaScript 関数を呼び出し、ユーザーが入力した値に「DE」プレフィックスが存在するかどうかを確認し、存在しない場合は「DE」プレフィックスを追加します。

お役に立てれば！

score 2 · Accepted Answer

JavaScript を使用する必要はありません。単純な HTML と CSS で問題なく機能します。

の左側に移動DEします:<span><input>

<span class="iban">DE</span><input type="text" id="iban" />

次に、の<span> 内側に配置し<input>ます。

span.iban
{
    position: relative;
}

input#iban
{
    margin-left: -25px;
    padding-left: 25px;
}

上記のコードは以下を生成します。

ここにJSFiddleがあります。

3 に答える 3