如何用JavaScript，jQuery，Zepto来实现输入框只能输入纯数字

最新推荐文章于 2024-07-31 09:38:11 发布

原创最新推荐文章于 2024-07-31 09:38:11 发布 · 722 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载请注明出处。

文章标签：

#javascript #jquery #zepto

前端专栏收录该内容

186 篇文章

订阅专栏

本文介绍使用jQuery和Zepto库实现对输入框的数字限制功能，包括禁用输入法、阻止非数字键输入及粘贴操作，并通过键盘事件确保数值范围合理。

本文章地址：http://blog.youkuaiyun.com/csdn_yudong/article/details/52390236
本文由 Never_yu 创作，转载请保留出处。

jQuery

$('div.user-input input').bind('keypress',function(event){
    var eventObj = event || e;
    var keyCode = eventObj.keyCode || eventObj.which;
    if (!(keyCode >= 48 && keyCode <= 57)) {
      eventObj.preventDefault();  
    }
  }).focus(function () {
   //禁用输入法
     $(this).val('1');
     this.style.imeMode = 'disabled';
   }).bind("paste", function () {
     //获取剪切板的内容
     var clipboard = window.clipboardData.getData("Text");
     if (/^\d+$/.test(clipboard)) {
      return true;
     } else {
      return false;
     }
   }).bind('keyup',function(){
    // console.log($(this).val().charAt(0));
    if($(this).val().charAt(0) == 0) {
      $(this).val($(this).val().substr(1));
    }
      if($(this).val() < 1) {
        $('div.warning-msg').css('visibility','visible');
        $(this).val('1');
      } else if($(this).val() > 500){
        $('div.warning-msg').css('visibility','visible');
        $(this).val('500');
      } else {
        $('div.warning-msg').css('visibility','hidden');
      }
  });

zepto

Zepto(function($){
    // 对于只能是纯数字的输入框
    $('.only-number').bind('keypress',function(event){
        var eventObj = event || e;
        var keyCode = eventObj.keyCode || eventObj.which;
        if(!(keyCode >= 48 && keyCode <= 57)){
            eventObj.preventDefault();
        }
    }).bind('paste',function(e){
        //获取剪切板的内容
        var clipboardData = e.clipboardData || window.clipboardData;
        var clipboard = clipboardData.getData('Text');
        if (/^\d+$/.test(clipboard)) {
            return true;
        } else {
            return false;
        }
    });
});