javascript - 限制符号、字符和数字的文本框

Question

我在限制 Textbox 值方面遇到困难。

文本框不应允许 "?*," 以外的符号。

例如:A123?*,B456?*,C789?*,D126?*,E?*666

在逗号 (,) 前后只允许有 10 个字符/符号/数字。

文本框内仅允许 54 个字符，包括逗号。

在 TEXTBOX 中只允许使用 4 个逗号。

可能的文本框输入:ABC?12345*,A?BC*12345,A???1234**,?*C?12345*,ABC?123***

此外，符号和字符是可替换的，无论是在开始时 - 可能出现符号或字符或数字。

请查看图片以获得更多说明。

我尝试使用其他符号和允许的逗号进行限制，但我在使用 10 个字符进行限制并允许使用符号和字符数时遇到困难。

//<![CDATA[ 
window.onload = function() {
    /*var f = document.getElementById('textbox_restrict');
     f.addEventListener('keyup', function(evt){
     alert("Vinayagam");
     var regex = /[^a-zA-Z0-9]/;
     if(regex.test(this.value)) {
     this.value = this.value.replace(regex, '')  
     }
     });*/
    $('#textbox_restrict').keypress(function(e) {
        $('#backgroundPopup').animate({'opacity': 0.0, 'display': 'none'});
        this.value = this.value.replace(/[^0-9a-zA-Z\*\?\{0,12}]/g, '').toUpperCase();
    });

}//]]>  

$(function() {
    $('body').on('keyup', 'input[id^="textbox_restrict"]', function() {
        this.value = this.value.replace(/[^0-9a-zA-Z\*\?]/g, '').toUpperCase();
    });

    $('#search').live('click', function() {
    }); // End of save click function
}); // End of function 

I also took reference to this Question but the senario is different: How restrict textbox in C# to only receive numbers and (dot "." or comma ","), after "." or "," only allow 2 number characters

Regex Replace anything but numbers and lowercase

jQuery keyup() illegal characters

请多多指教!我对实现它有点困惑。

Answer 1

也许最好不要试图一次完成所有事情。我已将任务分解成多个部分以简化每个阶段。只需将下面的代码片段作为 keyup 或者 oninput 事件处理程序添加到您的 input。

keyUp = function () {
    var n, parts, temp,
        text = this.value,
        caretPos = this.selectionEnd; // Stores the caret position
    parts = text.split(','); // Creates an array of comma separated values
    while (parts.length > 5) { // Limits the array length to 5 i.e only 4 commas allowed
        parts.pop();
    }
    for (n = 0; n < parts.length; n++) { // Iterates through each comma separated string
        parts[n] = parts[n].substring(0, 10); // Limits the string length to 10
        temp = parts[n].match(/[0-9a-zA-Z\*\?]/g); // Creates an array of acceptable characters in the string
        if (temp) {
            parts[n] = temp.join(''); // Adds the accepted value to the original
        } else { // If not value, add empty to the original
            parts[n] = '';
        }
    }
    this.value = parts.join(',').toUpperCase(); // Creates a new acceptable value to the input
    this.setSelectionRange(caretPos, caretPos); // Returns the caret to the original position
    return;
}

现场演示 jsFiddle .

编辑

删除了字符串抑制到 54 以避免在字符串中间添加字符时意外删除字符串末尾的字符。添加了 else，它将在找不到可接受值的情况下添加一个空字符串。也看起来像 oninput 将是一个更好的事件与此代码。

编辑二

添加了一个插入符号位置，在编辑中间的字符串后返回到原来的位置。用鼠标粘贴文本时不完美，但似乎适用于键盘输入。 ( fiddle 链接已更新。)