JS 验证仅允许字母和特定符号 + 更改输入答案

【问题标题】：JS validation allow letters and specific symbol only + change inputJS 验证仅允许字母和特定符号 + 更改输入
【发布时间】：2020-09-05 10:25:31
【问题描述】：

我使用 JS 解决方案只允许字母和退格。我想在输入中添加更多选项，但无法找到正确的解决方案。

我的代码：

<input id="inputTextBox">

  $(document).ready(function(){
    $("#inputTextBox").keypress(function(event){
        var inputValue = event.which;
        if(!(inputValue >= 65 && inputValue <= 123) && (inputValue != 32 && inputValue != 0)) { 
            event.preventDefault(); 
        }
        console.log(inputValue);
    });
});

这给了我仅输入字母和使用退格键的正确结果。为了获得正确的用户体验，我需要添加以下内容。

允许输入“？” , '*' 和 '空格键'。

如果可能，请在用户键入时更改表单中的输入。因此，如果用户键入“？”或“空格键”，它会自动变为值“*”。

提前致谢。

【问题讨论】：

标签： javascript regex validation input

【解决方案1】：

对此解决方案稍作修改：
How to allow only numeric (0-9) in HTML inputbox using jQuery?

编辑：添加代码以在何时保留位置？和空格被替换

// Restricts input for the set of matched elements to the given inputFilter function.
// Modified to pass element to callback function
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

$(document).ready(function(event) {
  $("#inputTextBox").inputFilter(function(el) {
    var oldSelectionStart = el.selectionStart;
    var oldSelectionEnd = el.selectionEnd;
    var oldValue = el.value;
    el.value = el.value.replace(/[* ]/g, '?'); //replace * space with ?
    el.value = el.value.replace(/[^a-zA-Z?]/g, '');
    if (oldValue != el.value)
      el.setSelectionRange(oldSelectionStart-(oldValue.length-el.value.length), oldSelectionEnd-(oldValue.length-el.value.length));
    return /^[a-zA-Z?]+?$/.test(el.value); // alphabet question only
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inputTextBox">

【讨论】：

我很高兴，因为代码在移动设备上不起作用，因为除了字母之外仍然可以输入。
我在代码中添加了一个替换。看看它现在是否有效
感谢 user120242，这行得通。我在我的问题中犯了一个错误，如何将 * 和“空格键”更改为“？”而不是 in too *.我使用 el.value.replace 进行的编辑似乎不起作用。

【解决方案2】：

只需添加一个keyup函数来替换字符'？'和空格 * 并且还添加了空间的事件 ID 和“？”在您的按键功能中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inputTextBox">
<script>
  $(document).ready(function(){
    $("#inputTextBox").keypress(function(event){
        var inputValue = event.which;
        if(!(inputValue >= 65 && inputValue <= 123) && (inputValue != 32 && inputValue != 0 && inputValue != 63 && inputValue != 42 && inputValue != 32)) { 
            event.preventDefault(); 
        }
    });
     $("#inputTextBox").keyup(function(){
        var inputTxt =  $('#inputTextBox').val();
        inputTxt = inputTxt.replace('?', '*').replace(' ', '*')
          $('#inputTextBox').val(inputTxt); 
     });
});
</script>

【讨论】：

【解决方案3】：

您的代码已经存在问题，因为 65 - 123 包含字母，但它也包含 [] _ 等等。

所以你可能想要 65-90 用于 A-Z，然后 97-122 用于 a-z 48-57 用于 0-9。然后检查您要允许的每个字符，它们可能不在一个范围内。

如果您查看此处的 ascii 图表 https://theasciicode.com.ar/ascii-printable-characters/question-mark-ascii-code-63.html，您将看到您需要包含（或排除）的所有数字

在 keyUp 事件中，您可以查看值，然后根据需要将最后一个字符更改为 *，但请记住，这将更改实际值，而不仅仅是屏蔽它。

如果你想屏蔽它，你应该使用<input type="password"> 字段，它默认具有该行为。

【讨论】：