仅允许数字并将复制粘贴限制为仅文本框中的数字

时间:2012-05-29 06:10:06

标签: javascript html regex javascript-events

我有一个要求,我只需要在文本框中允许数字。我也将文本框中的位数限制为一定长度,例如6。我还想允许复制粘贴只有数字而不是其他数字。例如,我复制粘贴一个类似123456的数字应该被允许。假设我有一个数字(例如.123 454123$234),其中包含空格或其他不应允许的字符并抛出错误。我还想修改数字中的空格,因为文本框的值将更新为数据库。请建议如何实现它。

3 个答案:

答案 0 :(得分:1)

这绝对是一个黑客,但它是我迄今为止发现的限制复制/粘贴内容的唯一方法。它的当前状态也会丢失光标位置。我使用的是jQuery,但这并不是必需的。你做的是,当你检测到一个粘贴时(通过ctrl + v或element.on(' paste'))。然后选择文本,获取选择内容,清理,将值赋回元素 这是一个傻瓜:http://plnkr.co/edit/ohgliFudb9hPTYr4w8yY 这是一些代码:

$(function(){
      var acceptableChars = {8: 'backspace', 9: 'tab', 13: 'enter', 17: 'ctrl',
        18: 'alt', 27: 'esc', 16: 'shift', 33: 'pageup', 34: 'pageDown', 35: 'end',
        36: 'home', 37: 'left', 38: 'up', 39: 'right',40: 'down', 46: 'delete',
        48: '0', 49: '1', 50: '2', 51: '3', 52: '4', 53: '5', 54: '6', 55: '7',
        56: '8', 57: '9'},
      valsArr = $.map(acceptableChars, function (key, val) { return key; }),
      ctrlPressed = false,
      element = $('#pasteme');
      element.on('paste', function (e) {
        setTimeout(function() {
          var elVal, formattedVal;
          element.select();
          elVal = document.getSelection().toString();
          formattedVal = formatter(elVal);
          setValue(formattedVal);
        }, 0);
      });
      element.on('keydown keypress', function(e) {
        if (e.which === 17) {
          ctrlPressed = true;
        }
        $('.textme').text(!!acceptableChars[e.which] || ctrlPressed);
        return !!acceptableChars[e.which] || ctrlPressed;
      });
      element.on('keyup', function(e){
        if (e.which === 17) {
          ctrlPressed = false;
        }
      })
      function setValue(val) {
        console.log(val);
        element.val(val);
        setTimeout(function(){ element.val(val) },0);
        setTimeout(function(){ element.val(val) },10);
      }
      function formatter(val) {
        var newStr, val;
        newStr = [];
        Array.prototype.slice.call(val).forEach(function(char, i) {
          if (~valsArr.indexOf(char)) {
            newStr.push(char);
          }
        });
        console.log(newStr, val);
        return newStr.join('');
      };
  });

答案 1 :(得分:0)

这是一个只与数字匹配的正则表达式:^\d+$

这是另一个问题,答案类似于您要实施的内容:Restricting input to textbox: allowing only numbers and decimal point

答案 2 :(得分:0)

您可以通过正则表达式模式验证它! 在javascript中, 创建正则表达式的对象,如

var patt=new RegExp(pattern,modifiers);

function onlyNumbers(evt)

{

    var e = event || evt;
    var charCode = e.which || e.keyCode;

    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;

    return true;

}