掩码输入数量 - 百分比 [英] Mask input for number - percent

问题描述

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

How can create a mask input for number that have percent by jQuery? Do I make input just accept until three numbers and put percent sign after numbers while user finished typing(keyup)?

我不使用插件。

示例：
1％或 30 ％或 99％或 100％或 200％

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

推荐答案

最好不要使用JavaScript。除了使用 onkeyup 检测文本输入时出现的问题，您还可以将生成的字符串解析回客户端/服务器脚本中的数字。如果你希望百分号看起来是集成的，你可以这样做：

You're better off not using JavaScript for this. Besides the problems that come with using onkeyup for detecting text input, you also have the hassle of parsing the resulting string back to a number in your client/server scripts. If you want the percent sign to look integrated, you could do something like this:

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

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

I'm rushing slightly, so you may have to tweak the styles to get it to look right cross-browser. At least it gives you the general idea.

这篇关于掩码输入数量 - 百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！