仅 Javascript 正则表达式文本框答案

【问题标题】：Javascript Regex Only Textbox仅 Javascript 正则表达式文本框
【发布时间】：2009-04-28 20:29:24
【问题描述】：

我能够在 c# / .net 中找到解决方案，但对于常规的 web html 却没有。如果已经有答案，请告诉我，我会结束问题。

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

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

【问题讨论】：

您是否尝试过寻找网络上已经存在的解决方案？我相信他们就在那里，我真的不想成为你的打字员，所以去谷歌吧，当你对细节有疑问时，回到这里——除非你想付钱让我为你写代码。
给你：xploredotnet.com/2007/09/…
对，我本可以这样做，但是使用 SO 来回答也有可能产生讨论、新想法等，而不仅仅是一个静态站点。不过感谢您的帮助

标签： javascript regex textbox

【解决方案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, '');
});

【讨论】：

【解决方案2】：

有关如何允许使用字母数字字符和空格（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, '');}});

有关如何仅允许小写 alpha 字符（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, '');}});

等等……

【讨论】：

【解决方案3】：

假设您将输入存储为变量input...

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

每次按键后，输入的值都会被去除任何非字母数字字符。

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：

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

【讨论】：