入力後に入力ボックスに％記号を表示するように、フォームの要素をスタイルで入力できますか？

Question

ユーザが入力した後にHTML入力フィールドに量子を表示する方法はありますか？

たとえば、80％などのフィールドをパーセントで入力したい場合 入力ボックスに80と入力するだけで、数字の後に％記号が表示されますが、実際には表示されません入力の一部。フォームが提出されるとき、私は、数字だけが提出され、パーセント記号ではありません。

これはできますか？

％記号とは別の一般的な例では、例えば、ユーザが50と入力すると予想される50Hzと入力し、Hzは入力後に表示される量子になります。

注：私は純粋なCSSまたは別の「装飾のみ」のアプローチのために、その点で期待しています

、かなり問題にアプローチする方法がわかりません。私の希望は量量詞を入力する必要はありません。例えば、私の量指定子がHzなら、 "50 Hz"とタイプするのは嫌だし、 "50"とタイプして、その後にHzと書かれているのを見てほしい。私は、右端に％記号がある背景イメージを作成することができました。別の解決策は、ラベル、すなわちパーセント（％）を使用し、ユーザに％記号なしの数字だけを入力させることである。

Answer 1

ここに行きます。

$が既に追加されていないか確認してください。

参考：here

$("#test").on("keydown", function(event) { 
 
    var val = $(this).val(); 
 
    var bool = event.ctrlKey || event.shiftKey || event.keyCode == 8; 
 
    if (!bool) { 
 
    if (val.indexOf('$') == -1) { 
 
     $(this).val(val + '$'); 
 
     this.selectionStart = this.selectionEnd = $(this).val().length - 1; 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="test" type="text" />