Question

当元素失去焦点时，会触发javascript中的onblur事件。

onkeydown在按下某个键时具有焦点的元素发生，并在键被释放之前定期发生。

如果我想验证日期字段，onkeydown事件涉及9和13（输入和制表键）。但是当我按下回车键时，我收到重复的警报信息。当然，在这种情况下，我们有两个测试，onblur和onkeydown事件。

这是html代码：

<html:text      onblur="return onDateChange(this);"
        onkeydown="return onDateKeyPress(this);"/>

onDateChange（）方法是：

function onDateChange(obj){
//validateField is an externatl javascript method which trigger an alert message if we have errors in date 
        if(validateField(obj,'date',dateFormat)){
        //do instructions
        }
}

最后onDateKeyPress（）方法是：

function onDateKeyPress(obj){
    if(window.event.keyCode == 9)
    {  
       if(validateField(obj,'date',dateFormat))
       {
           //do instructions
       }
    }
    if(window.event.keyCode == 13)
    {  
      if(validateField(obj,'date',dateFormat))
      { 
        //do instructions
      }
    }
}

因此，问题是一个显示警告消息。有什么建议？

Answer 1

你可以使用jquery

轻松完成

$('#text_field_id').bind({
  blur: function(event) {
    if(validateField(this,'date',dateFormat)){
        //do instructions
        }
  },
  keydown: function(event) {
    if(event.keyCode == 9)
    {  
       if(validateField(this,'date',dateFormat))
       {
           //do instructions
       }
    }
    if(event.keyCode == 13)
    {  
       if(validateField(this,'date',dateFormat))
       {
           //do instructions
       }
    }

  }
});

您不需要在文本元素中包含onclick或onkeydown。一个小问题，你想在所有情况下执行相同的指令或不同的指令????如果你想执行相同的指令，可以删除很多代码。

Answer 2

在上面的解决方案中;当模糊被触发并且代码的if分支什么都不做时，keydownFired为true。所以没有任何反应。

如果模糊除了显示警报之外还有其他事情要做;接下来应该有效。

input.addEventListener('blur', function (e) { 

 doSomethingThatshldHappenAlwaysOnBLur();

    if (keydownFired) { 

      keydownFired = false 

    } else { 
        showAlert();    
  } 
})

Answer 3

最近，我在将 onkeypress和onblur 附加到一个元素时遇到了问题。 onkeypress和onkeyblur的主要问题之一是它们通过 nature 彼此触发：）（触发了吗？明白了吗？我开玩笑很不好意思，对不起！）

解决方案既简单又愚蠢。发生onblur时 AND 不会发出警报，而是触发仅onblur 。怎么样？

//I gave this thing and id. You should always give your things and id. Ids are cool and I love them.
<html:text id="thisIsMyId"
  onblur="return onDateChange(this);"
  onkeydown="return onDateKeyPress(this)";
/>

onDateChange（）方法将几乎保持不变：

//This will stay the same, you will see why, soon
function onDateChange(obj){
//ValidateField is an externatl javascript method which trigger an alert message if we have errors in date 
//If you might have noticed tha **this validate** function is used 3 times, why?
    if(validateField(obj,'date',dateFormat)){
      //do instructions and **I assume the alert?**
    }
}

现在，我们将使 onDateKeyPress（）有点模糊：）

//Here is where we strike
function onDateKeyPress(obj){
    //This looks weird but it checks if the keycode actually works in the browswer
    var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    //Instead of having 2 ifs just make one if with and the logical operator "or" :)
    if(keycode == 13 || keycode == 9){
      //I am not sure if oyu need to use this but in the example I had, I had to use 
      //my validation-function otherwise it would just submit
      if(validateField(this,'date',dateFormat)){
        //If you have a submit form or something this can help
        event.stopPropagation();

        //we just trigged the onBlur Handler by "blurring" this thing :)
        document.getElementById('thisIsMyId').blur();
      }
}

有了这个，我们确实削减了一次验证，只需要编写一次逻辑即可。仅在onDateChange（）函数中。

如果有人可以做得更好，请在下面发表评论。我想使代码更短。

最终还是取决于具体情况。它对我有用，但这不是“万能解决方案”。

javascript中的onkeypress + onblur

3 个答案: