在 Javascript 上显示警报时忽略按键

Question

当光标聚焦在文本框中并按下回车键时，我有一个函数 X 在做某事，但是有可能（使用其他 JS 函数）如果我专注于这个文本框，我会收到警报。

问题发生在这里，有时我通过按enter“忽略”错误，当警报出现时如何不调用此函数X，但我希望它在警报出现时再次工作又关门了。

在 HTML 页面上：

<input type='text' name='col0' id='col0' onkeyup='arrowHandler(0);'
onblur='count(0)' />
<input type='text' name='col1' id='col1' onkeyup='arrowHandler(1);' 
onblur='count(1)' />
<input type='text' name='col2' id='col2' onkeyup='arrowHandler(2);' 
onblur='count(2)' />
<input type='text' name='col3' id='col3' onkeyup='arrowHandler(3);' 
onblur='count(3)' />

在 JS 页面上：

function arrowHandler(i){
  var key = window.event.keyCode;
  if(key == 13){
    // moving to the next (or first, if last) text field
    var newcol = parseInt(i) + 1;
    if(newcol == col) newcol = 0;
    elmt = document.getElementById("col" + newcol);
    elmt.focus();
  }
}

function count(i){
  if(parseInt(document.getElementById("col" + i).value) > 20){
    alert("error!");
  }
}

这里，当焦点在col0时，我写25，然后焦点移动到col1，我得到一个警报，然后我按回车，结果焦点移动到col2（我不想要最后一个动作，因为在显示警报时按 Enter）。

Answer 1

你可以在 if(key == 13) 条件中的 arrowHandler 中使用 count 函数，并在 count 函数中添加 return false

（有时间我会改进我的答案）

Answer 2

你可以试试这样的：

var block = false;

function arrowHandler(evt, i){
  var key = window.event.keyCode;
  if(!block && key == 13){
    // moving to the next (or first, if last) text field
    var newcol = parseInt(i) + 1;
    if(newcol == col) newcol = 0;
    elmt = document.getElementById("col" + newcol);
    elmt.focus();
  }
}

function count(i){
  if(parseInt(document.getElementById("col" + i)).value > 20){
    block = true;
    alert("error!");
    setTimeout(function(){block=false;},100);
  }
}

alert 停止 JS 执行，在警报后立即忽略任何按键。

尽管您可能应该重新考虑使用alert，但还有更好的方法来进行验证。

Answer 3

这是一个更简单的版本。处理焦点是在一个单独的函数中完成的。不需要计时器等等。希望这会有所帮助。

正如其他人所说，请避免使用警报，如果你发现这样的东西真的很烦人，不是吗？考虑一下。

var handleFocus = function (i, error) {
    var id = "col" + (error ? i : ++i);
    if (id === 'col' + col) id = 'col0';
    alert(id + "  " + i + "  " + error)
    document.getElementById(id).focus();
};

var arrowHandler = function (evt, i) {
    var key = window.event.keyCode;
    if (key == 13) {
        handleFocus(i, false);
    }
};

var count = function (i) {
    if (parseInt(document.getElementById("col" + i).value) > 20) {
        alert("error!");
        handleFocus(i, true);
    }
};

Answer 4

理想情况下，您不使用alert()，而是弹出一个样式很好的<div>，以获取焦点，或者显示一个<span>，指示失败消息而不强制用户确认。

如果您选择坚持使用alert() 解决方案，@gopi1410 是正确的：在之前设置 var 并在之后清除它，这意味着“不过滤击键”。

Answer 5

试试这个，我想它应该可以工作：

当您发出“错误！”警报时，您可以使用全局临时变量 t 并将其设置为 1。然后在您的 arrowHandler 函数中将 if 条件更改为 if(key==13 && t==0) 后跟您的代码并在其中添加一个 else 部分来更改 t=0。

另外，我猜你的parseInt(document.getElementById("col" + i))>20 语句应该替换为parseInt(document.getElementById("col" + i).value)>20。