防止用户输入某些字符？

Question

我对JavaScript非常陌生，所以如果我不太明白，请和我一起裸照。

我需要一个只能取数字但不允许使用“+”，“ - ”，“*”和“/”等符号的字段。 0也不能是第一个数字。如果我创建一个输入字段并将它的类型设置为“数字”，我仍然可以至少写入“+”和“ - ”，并且我似乎无法阻止用户将0写为第一个数字。

$('input#update-private-ext').on('keydown', function (e) { 
    var value = String.fromCharCode(e.keyCode); 
    if ($(this).text.length == 0 && value == 0) { 
     return false; 
    } 
}); 

以上是我第一次尝试使函数不允许0作为第一个字符，但它似乎不起作用。它只是让我写0作为第一个字符。我也试过这种从显示出来停止的迹象：

$('input#update-private-ext').on('keydown', function (e) { 
    var badChars = '+-/*'; 
    var value = String.fromCharCode(e.keyCode); 
    if ($(this).text.length == 0 && value == 0) { 
     return false; 
    } 
    if (badChars.indexOf(value) == -1) { 
     return false; 
    } 
}); 

但随着badChars检查，我不能写任何东西在我的领域。那么我在这里错过了什么？

Answer 1

您应该使用e.key来获取当前按键。 String.fromCharCode(e.keyCode)给出了错误的结果。

此外，你应该检查是否坏字符是不是-1。如果是，那么你的字符是不是坏字符，所以你应该不是输入if。

如果你想获得输入字段的长度，你应该使用jQuery的.val()而不是.text()。或者你可以简单地使用this.value.length来完成。

$('input#update-private-ext').on('keydown', function (e) { 
 
     var badChars = '+-/*'; 
 
     var value = e.key; 
 
     if (this.value.length == 0 && value == '0') { 
 
      return false; 
 
     } 
 

 
     if (badChars.indexOf(value) !== -1) { 
 
      return false; 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="update-private-ext">

Answer 2

你可以做这样的事情如下：
1.检查坏字符如果badChars.indexOf(v) >= 0。
2.不允许从0开始，检查输入是否从0开始，如果是，则将输入字段设置为空白。

这可以给你一个开始！

$('input#update-private-ext').on('keydown', function(e) { 
 
    var badChars = '+-/*'; 
 
    var v = e.key; 
 
    if (badChars.indexOf(v) >= 0) { 
 
    return false; 
 
    } 
 
    if ($(this).val().startsWith('0')) { 
 
    $(this).val(""); 
 
    return false; 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="update-private-ext" />

Answer 3

当你比较数字和字符串你必须记住，数字是利用从48 to 57字符代码和比较数字的字符串编码是错误倾向在JavaScript中因为有许多隐含的强制。您应该比较相同类型的对象以避免混淆。

在你的情况下，比较应该从String.fromCharCode解析字符串的方式来完成等于'0' - 零字符（串），而不是0的号码。

还有一些keyCode解析的问题，它们会产生符号的奇怪值，因为在解析时您必须手动考虑Shift和其他元键是否被按下。省去一些麻烦，只需使用e.key即可获得解析的密钥值。

顺便说一下，请查看this and $(this)之间的区别。基本上，就你而言，这意味着输入字段的实例是JQuery迭代器的第一个元素 - $(this)[0]。然后您可以使用this，它会自动设置为事件处理程序中的目标元素。

请参阅调试信息阻塞第一0的下面的例子打印出：

$('input#update-private-ext').on('keydown', function (e) { 
 
    var value = e.key; 
 
    
 
    console.log('Typed character:'); 
 
    console.log(value); 
 
    
 
    console.log('$(this)'); 
 
    console.log($(this)); 
 
    
 
    console.log('this (input element):'); 
 
    console.log(this); 
 
    
 
    console.log("input's value:"); 
 
    console.log(this.value); 
 
    
 
    if (this.value.length == 0 && value == '0') { 
 
     console.log('blocked');  
 
     return false; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="update-private-ext" />

为了阻止其他字符你可以过滤它们以下列方式（请记住，indexOf当找不到索引时返回-1）：

$('input#update-private-ext').on('keydown', function (e) { 
 
    var badChars = '+-/*'; 
 
    var value = e.key; 
 
    if (this.value.length == 0 && value == '0') { 
 
     return false; 
 
    } 
 
    //Please note NOT EQUALS TO -1 which means not found. 
 
    if (badChars.indexOf(value) !== -1) { 
 
     return false; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="update-private-ext" />