复制和粘贴时不允许文本框中的小数和文本值答案

【问题标题】：Do not allow decimal and text value in textbox on copy and paste复制和粘贴时不允许文本框中的小数和文本值
【发布时间】：2016-03-08 16:05:45
【问题描述】：

我不想允许在文本框中输入、复制和粘贴十进制值和字母。而且我可以输入负值。但是负号（“ - ”）应该总是在开头。请看下面的小提琴小提琴。在这个小提琴中，它不允许十进制值和字母表。但是如果我像这样复制并粘贴“22.50”，它就是十进制值。我该如何限制这个。

我的要求，

1) 只允许数字（正数和负数）。

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

3) 字母不应该允许复制粘贴。

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

FIDDLE

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;
};

&lt;input type="text" maxlength="10" id="myInput"&gt;

请帮我做这件事。

【问题讨论】：

怎么样？
您的输入是表单的一部分吗？提交表单时可以使用pattern 验证吗？
在 input.onkeypress 函数中添加一条警告语句。然后你会看到这个函数何时过滤输入。它可能不会对粘贴的输入执行。
绑定按键有风险，用户可以右键选择粘贴。不确定如果发生这种情况是否会触发关键事件

标签： javascript jquery html css

【解决方案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/

【讨论】：

我认为你误解了这个问题。
谢谢。但是如果我复制并粘贴十进制值，它会采用十进制值。我也想限制它。如果我粘贴“50.25”，它应该只需要“50”。我想要的就是这样。也与负数相同。如果我粘贴“-50.30”，它应该只需要“-50”。
非常感谢穆纳维尔。你能帮我做个小更正吗？这是完美的工作。但我无法输入负值。如果我复制粘贴它正在工作。但不能输入负数。这是最后一个。请帮帮我。
我希望输入类型为数字，而不是文本。
@sathishkumar 立即查看

【解决方案2】：

我的回答与你所问的不完全一样，但我敢直言不讳，在这里表现出一些不受欢迎的主动性。

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

“静静地吃”输入可能会让某些用户感到恼火，尝试跨浏览器实现它是一件很痛苦的事情。它们的设计目的不是为了提供使这项工作更容易和对用户友好的 API（想想移动设备）。

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

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

干杯。如果您无论如何都要按照自己的方式进行 - 控制用户如何输入 - 我会说您正处于一个痛苦的世界。 ^_^ 祝你好运。

【讨论】：

【解决方案3】：

你可以使用 onpaste 事件

input.onpaste = function...

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

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

【讨论】：

【解决方案4】：

这是回答您问题的另一种方式。你可以试试这个插件——如果它适合你的目标浏览器——那么给你更多的力量。

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

【讨论】：

【解决方案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 的 pattern输入验证的属性。请参阅下面我在此jsfiddle 中使用的代码。

<input type="text" maxlength="10" id="myInput" pattern="-?[0-9]+" title="Integers only." required/>

【讨论】：

【解决方案6】：

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

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

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

上述input 的step 属性不允许出现任何小数。任何受人尊敬的 AJAX 表单提交库或插件也将考虑此验证。

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

-?[0-9]+

【讨论】：