Javascript 正则表达式文本框

Question

我能够在 c# / .net 中找到此问题的解决方案，但无法找到常规 Web html 的解决方案。如果已经有答案，请告诉我，我将关闭问题。

如何创建一个仅允许基于给定正则表达式（例如[a-zA-Z0-9]）的某些字符（例如字母数字）的文本框？因此，如果用户尝试输入其他内容（包括粘贴），则会将其删除或不允许。

<input type="text" class="alphanumericOnly">

Answer 1

基本功能是这样的：

string = string.replace(/[^a-zA-Z0-9]/g, '')

这将替换

[a-zA-Z0-9]

未描述的任何字符。

现在您可以将其直接放入元素声明中：

<input type="text" class="alphanumericOnly" onkeyup="this.value=this.value.replace(/[^a-zA-Z0-9]/g, '')">

或者（当您使用类提示时）将此行为分配给具有类

input

:

 的每个 

alphanumericOnly

元素

var inputElems = document.getElemenstByTagName("input");
for (var i=0; i<inputElems.length; i++) {
    var elem = inputElems[i];
    if (elem.nodeName == "INPUT" && /(?:^|\s+)alphanumericOnly(?:\s+|$)/.test(elem.className) {
        elem.onkeyup = function() {
            this.value = this.value.replace(/[^a-zA-Z0-9]/g, '');
        }
    }
}

但是使用 jQuery 或其他 JavaScript 框架可能更容易做到这一点：

$("input.alphanumericOnly").bind("keyup", function(e) {
    this.value = this.value.replace(/[^a-zA-Z0-9]/g, '');
});

Answer 2

1. 如何允许字母数字字符和空格（a-z、A-Z、0-9 和空格，其他字符在键入时被删除）的示例：

$('#some_input_field_id').unbind('change keyup paste mouseup').bind('change keyup paste mouseup', function(){if(this.value.match(/[^a-zA-Z0-9 ]/g)){this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');}});

2. 如何仅允许小写字母字符（a-z，其他字符在键入时被删除）的示例：

$('#some_input_field_id').unbind('change keyup paste mouseup').bind('change keyup paste mouseup', function(){if(this.value.match(/[^a-z]/g)){this.value = this.value.replace(/[^a-z]/g, '');}});

等等...

编辑： 从 jQuery 3.0 版开始，

.bind()

和

.unbind()

已被弃用。相反，如果您使用 jQuery 3.0（及更高版本），只需分别使用

.on()

和

.off()

事件处理程序附件。

Answer 3

假设您将输入存储为变量

input

...

input.onkeyup(function(e) {
  this.value = this.value.replace(/\W/g, '');
}

每次按键后，输入的值将被去除所有非字母数字字符。

Answer 4

如果您在 keyup 事件上使用 .replace 方法，输入内容将在键入时闪烁非字母数字字符，这看起来很草率，并且不符合像我这样的强迫症患者的要求。

更简洁的方法是绑定到按键事件并在字符到达输入之前就拒绝它们，如下所示：

$('.alphanumericOnly').keypress(function(e){
    var key = e.which;
    return ((key >= 48 && key <= 57) || (key >= 65 && key <= 90) || (key >= 95 && key <= 122));
});

如果此特定组合不适合您的特定需求，可以在此处找到基本键码列表。

Answer 5

我注意到，至少在我的情况下，使用

paste

和

drop

事件，替换文本不起作用，因为此时输入的

value

属性仍然是前一个属性。所以我这样做了：

使用纯 JavaScript：

function filterInputs() {
  var that = this;
  setTimeout(function() {
    that.value = that.value.replace(/[^a-zA-Z0-9]/g, '');
  }, 0);
}

var input = document.getElementById('theInput');

input.addEventListener('keyup', filterInputs);
input.addEventListener('paste', filterInputs);
input.addEventListener('drop', filterInputs);
input.addEventListener('change', filterInputs);

Try writing non-alphanumeric characters: <input type="text" id="theInput">
<br>You can use this input to write anything and copy-paste/drag & drop it into the other one: <input type="text">

使用 jQuery：

function filterInputs() {
  var that = this;
  setTimeout(function() {
    that.value = that.value.replace(/[^a-zA-Z0-9]/g, '');
  }, 0);
}

$('#theInput').on('keyup paste drop change', filterInputs);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Try writing non-alphanumeric characters: <input type="text" id="theInput">
<br>You can use this input to write anything and copy-paste/drag & drop it into the other one: <input type="text">