JavaScript Regex Only文本框

qgelzfjb  于 2023-10-22  发布在  Java
关注(0)|答案(5)|浏览(114)

我能够在c# / .net中找到解决方案,但不能用于常规的web html。如果已经有答案了,请告诉我,我会关闭问题。
如何创建一个文本框,只允许某些字符(例如。字母数字)基于给定的正则表达式(例如,[a-zA-Z0-9])?因此,如果用户试图输入任何其他内容,包括粘贴,它将被删除或不允许。

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

yjghlzjz1#

基本功能是这样的:

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, '')">

或者(正如你使用类提示的那样)你将这个行为分配给类为alphanumericOnly的每个input元素:

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, '');
});
1mrurvl1

1mrurvl12#

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, '');}});

1.关于如何只允许使用双字母字符的示例(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()事件处理程序附件。

bxgwgixi

bxgwgixi3#

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

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

每次按键后,输入的值将被删除任何非字母数字字符。

qybjjes1

qybjjes14#

如果在keyup事件上使用.replace方法,输入将在键入非字母数字字符时 Flink ,这看起来很草率,不符合像我这样的强迫症患者。
一种更简洁的方法是绑定到按键事件,并在字符到达输入之前拒绝它们,如下所示:

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

如果这个特定的设置不适合您的特定需求,可以在here中找到基本键码列表。

ajsxfq5m

ajsxfq5m5#

我注意到,至少在我的例子中,对于pastedrop事件,替换文本不起作用,因为此时输入的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">

相关问题