html - input type="number" に記号を挿入することは可能ですか

Question

特定の要素のコストを入力するために使用される数値入力ボックスを作成する必要があります。ボックスに $ を挿入したいので、ユーザーが - たとえば - 20 と入力すると、$20 と表示されます。私はあまりにも多くを求めていますか？

Answer 1

数字フィールドは数字だけを取るように見えます。だからあなたはどちらかをすることができます

1）入力から$文字を移動します
。2）通常のテキスト入力を使用し、入力する値を数字と$文字のみに制限します。これを実現するには、イベントをリッスンし、keypressイベントデータを使用して、押されたキーを判別し、不要な値を許可しないようにします。 これが便利な例です。

Answer 2

HTML 部分では、テキストの値を$

<input type="text" value="$">

そしてJS部分：

$("input").keyup(function() {
    if(this.value.indexOf('$') !== 0) {
        this.value = '$';   
    } 
});​

Answer 3

これは、オンラインの寄付ページ (acceptiva.com がホスト) で見つけた実装から要約した、かなり斬新なアプローチです。

<input type="number" class="inputright inputcurrency">

どこ：

.inputright {
    text-align: right;
}

.inputcurrency {
    background: url(images/currency_symbol.png) no-repeat left; 
}