代码如下: $(function(){ //文本框只能输入数字(不包括小数),并屏蔽输入法和粘贴 $.fn.integer= function() { $(this).css(“ime-mode”, “disabled”); this.bind(“keypress”,function(e) { var code = (e.keyCode ? e.keyCode : e.which); //兼容火狐 IE if(!$.browser.msie&&(e.keyCode==0x8)){ //火狐下不能使用退格键 return ; } return code >= 48 && code<= 57; }
在网页开发中,有时我们需要对用户输入进行限制,确保数据的正确性和安全性。例如,一个文本框可能只允许用户输入整数或包含小数的数字。`jQuery`库提供了一个方便的方法来实现这样的功能。在给出的代码示例中,有两个自定义函数:`.integer()` 和 `.number()`,它们用于限定文本框只能输入整数或带有小数的数字,并且阻止其他非数字字符的输入。
我们来看`.integer()`函数,它的主要目的是限制文本框只能输入整数,并屏蔽输入法和粘贴功能。这个函数通过以下步骤实现:
1. 使用`.css()`方法设置`ime-mode`属性为`disabled`,这将禁用输入法,防止用户使用中文或其他语言的输入。
2. 使用`.bind()`方法绑定`keypress`事件监听器,当用户按下键盘上的键时触发。在这个事件处理器中,获取按键的`keyCode`或`which`值(兼容不同浏览器),然后判断是否在48到57的范围内,这个范围对应于ASCII码中的数字0到9。
3. 对于火狐浏览器,由于它不支持退格键的`keyCode`,所以需要特别处理。如果检测到退格键(`keyCode`为8),则返回false,阻止退格操作。
4. 同样使用`.bind()`方法绑定`paste`事件,当用户尝试粘贴内容时,返回false阻止这一行为。
5. 使用`.bind()`绑定`keyup`事件,当用户释放键盘键时,检查并移除值开头的连续零,确保不会出现前导零。
接下来是`.number()`函数,它允许用户输入包含小数的数字,同样阻止非数字字符的输入:
1. 它的结构与`.integer()`类似,首先禁用输入法,然后绑定`keypress`事件,不过这次处理逻辑稍有不同。除了检查是否在48到57的数字范围内,还添加了对小数点的处理。如果值中还没有小数点,那么可以输入小数点(`keyCode`为46);如果已经有一个小数点,则只允许输入数字。
2. 仍然有`paste`事件的处理,禁止粘贴操作。
3. `keyup`事件处理器中,如果值的第一个字符是小数点,则清空该值,避免用户在开头输入小数点。
4. `blur`事件在文本框失去焦点时触发,检查值的最后一个字符是否为小数点,如果是,则移除这个小数点,防止用户输入多个小数点。
这两个函数都是`.fn`扩展,意味着它们可以直接应用于jQuery对象上,例如:`$("#myInput").integer()` 或 `$("#myInput").number()`。这样就可以确保`#myInput`这个文本框只能接受整数或包含小数的数字输入,同时防止用户使用非数字字符或通过粘贴引入非法数据。这种方法在创建表单、在线支付或其他需要精确数字输入的场景中非常有用。