Question

如何通过jQuery创建具有百分比的数字的掩码输入？在用户完成输入（keyup）时，我是否只接受输入直到三个数字并在数字后面加上百分号？

我不使用插件。

实施例： 1％或 30％或 99％或 100％或 200％ < / p>

<input name="number" class="num_percent">

Answer 1

最好不要使用JavaScript。除了使用onkeyup检测文本输入所带来的问题之外，还有将生成的字符串解析回客户端/服务器脚本中的数字的麻烦。如果您希望百分号看起来是集成的，那么您可以执行以下操作：

<div class="percentInput">
    <input type="text" name="number" class="num_percent">
    <span>%</span>
</div>

.percentInput { position:relative; }
.percentInput span { position: absolute; right: 4px; top:2px; }
.num_percent { text-align: right; padding-right: 12px; }

http://jsfiddle.net/BvVq4/

我匆匆忙忙，所以你可能需要调整一下样式才能让它看起来是跨浏览器的。至少它给你一般的想法。

Answer 2

我保留了输入数字，移动了百分比字符，然后根据输入的长度（数字位数）修改了它的位置。

<强> HTML

<input type="number" min="0" max="100" value="100"> //chose 100 only for the sake of the example
<span class="percentage-char">%</span>

<强> CSS

input {
  width: 55px;
  height: 20px;
  font-size:18px;
}
.percentage-char {
  position: absolute;
  left: 32px; // default position - in this case 100
  top: 1px;
  font-size: 18px; 
}
.one-digit { //position of the '%' when input is 0-9
  left: 13px;
}
.two-digits{ //position of the '%' when input is 10-99
  left: 24px;
}

<强> JS

$(":input").change(function() { //listening to changes on input
   if ($(this).val() < 10) { //adding and removing the classes
        $('.percentage-char').removeClass('two-digits');
        $('.percentage-char').addClass('one-digit');
   } else if ($(this).val() > 9 && $(this).val() < 100) {
        $('.percentage-char').addClass('two-digits');
   } else {
        $('.percentage-char').removeClass('one-digit two-digits');
   }
});

查看此fiddle

掩码输入数量 - 百分比

2 个答案: