html - 表单中的 input 元素是否可以采用在输入后在输入框中显示 % 符号的样式？

Question

有没有办法在用户输入任何内容后在 HTML 输入字段中显示量词？

比如我要一个字段输入百分比，比如80%但我希望用户只在输入框中输入 80，我希望 % 符号显示在数字后面，但实际上不是输入的一部分。提交表单时，我只想提交数字而不是百分号。

这可以做到吗？

除了 % 符号之外，这是否可以用其他数量来完成，在一般情况下，例如 50Hz，用户应该只输入 50，而 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" />