javascript - 在 keyup 和 regex 上测试用户输入

Question

在我的例子中，要求是这样的——

名字应该允许字母，一些字符，如逗号、破折号和上升字符。

当我们尝试粘贴上升字符或在 Firefox 中使用“abctajpu”时，代码工作正常。但是只要用户输入 ALT+0192 或任何带有数字键盘的 ALT 键。

keyup 函数不起作用。它允许用户使用 ALT 键键入所有可能的组合。

这是示例代码..

var namePattern = /^[a-zA-Z,-. \'ÀÈÌÒÙàèìòùÁÉÍÓÚÝáéíóúýÂÊÎÔÛâêîôûÃÑÕãñõÄËÏÖÜŸäëïöüŸçÇŠšŽžÅå]$/g;
var negateNamePattern = /[^a-zA-Z,-. \'ÀÈÌÒÙàèìòùÁÉÍÓÚÝáéíóúýÂÊÎÔÛâêîôûÃÑÕãñõÄËÏÖÜŸäëïöüŸçÇŠšŽžÅå]/g;

---

$("#First_Name").bind('keyup paste altKey', function(event) {
  var obj = $(this);
  if (event.type == 'paste') {
     setTimeout(function() {
         validateRealTime(event, obj, namePattern, negateNamePattern)
     }, 1);
  } else {
   validateRealTime(event, obj, namePattern, negateNamePattern);
  }
});

Answer 1

key up 事件仍然会在他们使用数字键盘执行任何 ALT 键时触发，但是只有当他们停止输入时才会附加新字符。

是否有特定原因需要执行 key up 事件？ 当他们失去对输入的关注时，您可以验证您的字段。

此外，我们可以看到您的 validateRealTime 函数吗？

编辑

我想我已经想出了一个方法来完成你想要的。

我们必须更改您的函数以验证传递的字符串而不是获取对象的值:

function validateRealTime(str, regExPattern, negateRegExPattern) { 
    var fieldVal = str;
    fieldVal = fieldVal.replace(/^(\s+)/g,''); 
    fieldVal = validateInput(fieldVal, regExPattern, negateRegExPattern);  
    // return the new and validated value
    return fieldVal; 
}

我已经从函数中删除了 event，但如果您在其他地方使用它，您可以添加它。

此外，我们需要将 keyup 事件更改为 keypress 事件。这将使我们能够确定何时按下 ALT(ALT + # = 一次按键，而 ALT + # = # keyups)

此外，由于输入值在 keyup 上更新，我们需要确保在 keyup 上只显示经过验证的字符串。

var validatedValue;    // Store validate value to display on 'keyup'
var namePattern = /^[a-zA-Z,-. \'ÀÈÌÒÙàèìòùÁÉÍÓÚÝáéíóúýÂÊÎÔÛâêîôûÃÑÕãñõÄËÏÖÜŸäëïöüŸçÇŠšŽžÅå]$/g;
var negateNamePattern = /[^a-zA-Z,-. \'ÀÈÌÒÙàèìòùÁÉÍÓÚÝáéíóúýÂÊÎÔÛâêîôûÃÑÕãñõÄËÏÖÜŸäëïöüŸçÇŠšŽžÅå]/g;

$("#First_Name").bind('keyup', function(event){
    $(this).val(validatedValue);
})
.bind('keypress paste', function(event){
    var obj = $(this);
    var char;
    var string;
    var newval;


    if (event.type == 'paste'){
         setTimeout(function(){validateRealTime(obj.val(), namePattern, negateNamePattern)}, 1);
    } else {

        // Get the ASCII code of the key pressed and get the Char representation of it
        // When we do an ALT+#, it returns only one ASCII value
        char = String.fromCharCode(event.keyCode); 

        // Get the current string and append the character added by the ALT
        // We need to do this, because the val() is not updated yet, it still contains
        //  the old value
        string = obj.val() + char;

        validatedValue= validateRealTime(string, namePattern, negateNamePattern);

    }
});

另外，我还没有测试过paste事件。