Question

我不想允许在文本框中输入并复制和粘贴小数值和字母。我可以输入负值。但负面符号（“ - ”）应始终处于开头。请看下面的小提琴。在这个小提琴中它不允许十进制值和字母表。但是，如果我这样复制并粘贴“22.50”，它将取十进制值。我该如何限制呢。

我的要求，

1）仅允许数字（正面和负面）。

2）“ - ”符号应该在开头。不允许在中间或某处。

3）字母也不允许复制粘贴。

4）我可以复制粘贴数字，如“2222”和“-2222”。但不是字符和小数。

var input = document.getElementById("myInput");

input.onkeypress = function(e) {    e = e || window.event;
    var charCode = (typeof e.which == "number") ? e.which : e.keyCode;

    // Allow non-printable keys
    if (!charCode || charCode == 8 /* Backspace */ ) {
        return;
    }

    var typedChar = String.fromCharCode(charCode);

    // Allow numeric characters
    if (/\d/.test(typedChar)) {
        return;
    }

    // Allow the minus sign (-) if the user enters it first
    if (typedChar == "-" && this.value == "") {
        return;
    }

    // In all other cases, suppress the event
    return false;
};

<input type="text" maxlength="10" id="myInput">

请帮我这样做。

Answer 1

您可以使用jquery来监听输入字段中的更改

$('#myInput').bind('input', function(e) {
    //handle the input text here
});

如果您希望在字符串包含无效文本时不显示任何内容，则可以将输入字段的值设置为空

$("#myInput").val("");

更新：

这是演示

$('#myInput').bind('input', function(e) {
var str = $("#myInput").val();
var dec = str.indexOf(".");
var first_char = str.charAt(0);
var isNumber = true;
var haveDecimal = false;

if (first_char == '-' || !isNaN(first_char)) {
    for (i=1; i<str.length; i++) {
        if(isNaN(str.charAt(i)) && str.charAt(i) != '.') {
            isNumber = false;
            break;
        }
    }
}
else {
    isNumber = false;
}

if(dec != -1 && isNumber) {
    str = str.substring(0, str.indexOf("."));
}

if (isNumber) {
    $("#myInput").val(str);
}
else {
    $("#myInput").val("");
}
});

JSFiddle：http://jsfiddle.net/7XLqQ/99/

Answer 2

我的回答并不完全是你提出的问题，但我敢于直言并在这里表现出一些不必要的主动性。

将客户端输入锁定到表单是不可能的。任何输入锁定都应该是服务器端。

＆＃39;默默地吃着＆＃39;输入可能会让一些用户感到恼火，并且尝试实现跨浏览器是很痛苦的。它们的设计目的不是为了让这项工作变得更容易和用户友好（想想移动设备）。

因此，如果简单的路线适合您 - 您可以使用HTML5属性，让现代浏览器准确处理如何处理输入。如果您使用以下代码段的原始版本（我的意思是将其复制到您的本地计算机 - FIDDLE正在捕获将提供经验的提交事件），它将不允许用户发送表单。它将允许输入错误的符号，但它将指示错误。

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>123</title>
  </head>
<body>
   <form action="/" method="get">
    <input type="text"
           pattern="-*[0-9]+"
           required="required"
           title="Input number (required)."
    >
    <br>
    <input type="number"
           required="required"
           title="Input number here (required)."
    >
    <br>
    <input type="submit" value="Send">
</form>
</body>
</html>

＆＃13;

干杯。如果你打算按照自己的方式行事 - 在你的控制之下如何用户提出他的意见 - 我会说你正处于一个痛苦的世界。 ^ _ ^祝你好运。

Answer 3

你可以使用onpaste Event

input.onpaste = function...

对于验证，我认为你最好使用正则表达式

http://www.w3schools.com/jsref/jsref_obj_regexp.asp

Answer 4

这是另一种回答你问题的方法。您可以尝试使用此插件 - 如果它适合您的目标浏览器 - 那么您将获得更多权力。

http://digitalbush.com/projects/masked-input-plugin/

Answer 5

如果您愿意使用jQuery，则可以使用jQuery的.change()事件处理程序。当输入的值发生更改且输入失去焦点时，将调用事件处理程序。请参阅我在此jsfiddle中使用的以下代码。

$('#myInput').change(function() {
  var str = $('#myInput').val();
  var pattern = /^(-?)\d+$/;
  var result = pattern.test(str);
  if (result === true) {
    // Do something...
  } else {
    // Do something else...
  }
})

或者，如果您的输入位于表单中，您可以打开表单提交验证（而不是实时输入验证），并且您正在编写符合HTML5的浏览器，您可以绕过JavaScript并使用HTML5 {{1输入验证的属性。请参阅我在此jsfiddle中使用的以下代码。

pattern

Answer 6

作为替代方案，如果您在表单提交时使用输入，并且不需要以编程方式访问输入值，则可以让浏览器为您处理验证（您甚至可以使用CSS添加可视指示器）：

＆＃13;

input:invalid {
  color: #ff0000;
  border-color: #ff0000;
}

＆＃13;

<form action="#">
  <input type="number" step="1" value="0">
  <input type="submit">
</form>

＆＃13;

上述step的{{1}}属性不允许存在任何小数。任何可敬的AJAX表单提交库或插件也将考虑此验证。

否则，您正在查看每个处理程序中各种跨浏览器实现变体和事件处理程序的残酷和冗长的研究 - 输入值可能会发生变化 - 检查新值是否与正则表达式匹配：

input

复制和粘贴时，不允许文本框中包含小数和文本值

6 个答案: