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

Question

两个都想要：

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

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

例如：

• 用户在输入字段中输入验证码并按 Enter 键。
• 但是他们还没有登录。所以用户会收到一条消息，说明他们还没有登录。
• 他们登录，然后返回输入字段运行验证，但是当他们跳出该字段或按 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

听起来您在这里陷入了混乱。如果我理解正确的话，这个小提琴就是你所描述的：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 并在未输入键时简单地返回来消除由于模糊和更改事件而发生的任何问题。

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