javascript - 掩码输入数字 - 百分比

Question

如何通过 jQuery 创建具有百分比的数字掩码输入？我是否让输入仅接受三个数字，并在用户完成输入时在数字后添加百分号(keyup)？

我不使用插件。

示例:1% 或 30% 或 99% 或 100% 或 200%

<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/

我有点着急，所以你可能需要调整样式才能使其在跨浏览器上看起来正确。至少它为您提供了总体思路。