javascript - 在单击按钮或更新字段上运行代码，但不能同时运行两者

Question

我两个都想要:

• <input onchange='fncChkVrification()'>
• <button onmouseup='fncChkVrification()'>Hit Enter after pasting or typing the Code. Or Click Here.</button>

为了便于使用，我希望用户能够在填写输入文本框后按 Enter 并运行代码。问题是，用户可能需要稍后返回该输入字段，并使用相同的值重新运行代码。

例如:

• 用户在输入字段中输入验证码，然后按 Enter 键。
• 但他们尚未登录。因此用户会收到一条消息，指出他们尚未登录。
• 他们登录并返回输入字段以运行验证，但是当他们按 Tab 键移出该字段或按 Enter 时，不会运行任何代码，因为验证码相同。

代码仅在值更改时运行。我假设浏览器记录并跟踪该值以及它是否已更改。

我可以:

• 如果出现错误，请清除该字段，并让用户再次输入验证码。。但我想避免这种情况。
• 仅使用按钮，而不使用 onchange事件。

我想为用户提供两个选项。我读过 JavaScript 不会同时运行两个函数，但是如果代码非常短并且运行速度非常快，它会运行两次，不是同时运行，而是立即按顺序运行吗？

如果由于某种原因代码第二次运行，它可能根本不会影响结果，但我想避免不必要的重复。

代码确实运行了两次!如果我单击该按钮，两个事件都会触发。 onmouseup从按钮，和 onchange从输入字段。

window.countTimesRun = 0;

window.fncChkVrification = function() {
  console.log('fncChkVrification ran: ');
  
  countTimesRun = countTimesRun + 1;
  console.log('countTimesRun: ' + countTimesRun);
  
  var getVrfyChkCode = document.getElementById('divForOnHoldKey').value;
  
  google.script.run.withFailureHandler(onFailure)
    .withSuccessHandler(rtrnFromVerify)
    .verifyCode(getVrfyChkCode);
};

从技术上讲，JavaScript 可能不会同时运行，但代码如此短且速度如此之快，以至于它背靠背运行两次。

我可以以某种方式暂停、跟踪或保留计时器。但这似乎有点矫枉过正，以至于不值得。我可能只需要一个按钮，而不需要 onchange事件。除非有人有一个简单的解决方案。我没有使用 jQuery。

如果 JavaScript 有 onexit输入字段的事件，这可能会解决问题。但据我所知，这种情况并不存在。

我想也许可以改变按钮onmouseup事件至onclick可能会做一些事情，但这不起作用。

我刚刚尝试使用 onblur这造成了很多非常不受欢迎的情况。当字段失去焦点时，代码将运行，但光标仍保留在输入字段中。因此，如果我单击新的浏览器选项卡，它就会陷入循环。代码将运行，新的浏览器选项卡将不会加载，然后焦点又回到同一个地方!

我尝试让按钮获得焦点，但是当我按 Enter 时，光标不会移动到下一个选项卡元素。如果我单击 Tab，按钮将获得焦点，并且代码将运行。但如果我按 Enter，什么也不会发生。

我开始意识到，解决我的问题的方法是控制用户按下 Enter 键时发生的情况。因此，从某种意义上说，这是在按下 Enter 键时运行代码的重复问题。我在发布此内容时没有意识到这一点。

我找到了解决方案。解决问题的关键是它们keyCode查看。这是一个工作的 jsFiddle:Run Code on Either Enter Key Press, or Button Click, but not Both

Answer 1

听起来你已经陷入困境了。如果我理解正确的话，这个 fiddle 会做你所描述的事情:http://jsfiddle.net/wR32h/

这就是它的核心:

FormManager.prototype.initialize = function () {
    this.elements.input.onkeyup = this.handleInputKeyup.bind(this);
    this.elements.button.onclick = this.handleButtonClick.bind(this);
};

FormManager.prototype.handleInputKeyup = function (evt) {
    // check to see if the key was enter
    if (evt.keyCode !== 13) {
        return;
    }
    if (this.checkState()) {
        this.validateCode();
    } else {
        alert('you need to log in before validation can take place');
    }
};

FormManager.prototype.handleButtonClick = function (evt) {
    if (this.checkState()) {
        this.validateCode();
    } else {
        alert('you need to log in before validation can take place');
    }
};

我们可以通过捕获 onkeyup 并在未输入 key 时简单地返回来消除由于模糊和更改事件而发生的任何问题。

使用这种方法，您不应该触发多个事件等...如果没有更多代码，很难看出到底出了什么问题，但希望我已经正确理解并涵盖了您的问题。