javascript - 如何通过回车键验证答案？

Question

我创建了一个输入框，使用tab键验证，但需要在按下回车键后验证。

在这里，只有在我输入正确答案然后按 Tab 键后，才会显示刻度符号。然后它转到下一个输入框并进行验证。

但是，当我输入正确答案并在输入框内按下回车键时，需要进行验证。

为此，我尝试了这个 JS 代码:

$(document).keypress(function(e) {
  if(e.which == 13) {
    checktxt(h,v,w,c)
  }
});

function checktxt(h,v,w,c) {
  var th=$("#"+h).val();
  var tv=$("#"+v).val();
  if(th.toLowerCase()==tv.toLowerCase()) {
    $( "."+c ).show();
    $( "."+w ).hide(); 
  } else if(tv.toLowerCase()=="") {
  } else {
    $( "."+c ).hide();
    $( "."+w ).show();
  }
}

但是当我按下回车键时它也没有得到验证。

我的 HTML 代码是

<div>
  <input id="texthidden1" type="hidden" value="877" />
  <input id="textvisible1" type="text" value="" onblur="javascript:checktxt('texthidden1','textvisible1','wrong1','correct1');" />
  <div class="wrong1"><img src="../images/smallwrong.png"/></div>
  <div class="correct1"><img src="../images/smallgreen.png"/></div>
</div>

我还需要在删除输入框的内容时让刻度图像消失。

Answer 1

你的代码的问题在于你的按键监听器中的这一部分

checktxt(h,v,w,c) 

h、v、w 和 c 在这里是未定义的，因为 onblur 事件的代码工作正常并且你想在输入键时复制相同的代码，你需要在你的按键事件中定义这些变量。

如果您检查 html ，您会将所有元素的 ID 传递给 JS 中的 checktxt 函数。

在按键监听器中也做同样的事情。

 $(document).keypress(function(e) {
    if(e.which == 13) {
    checktxt('texthidden1','textvisible1','wrong1','correct1')
    }
 });

$(document).keypress(function(e) {
  if (e.which == 13) {
    checktxt('texthidden1', 'textvisible1', 'wrong1', 'correct1')
  }
});

function checktxt(h, v, w, c) {
  var th = $("#" + h).val();
  var tv = $("#" + v).val();
  if (th.toLowerCase() == tv.toLowerCase()) {
    $("." + c).show();
    $("." + w).hide();
  } else if (tv.toLowerCase() == "") {} else {
    $("." + c).hide();
    $("." + w).show();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="texthidden1" type="hidden" value="877" />
  <input id="textvisible1" type="text" value="" onblur="javascript:checktxt('texthidden1','textvisible1','wrong1','correct1');" />
  <div class="wrong1">
    <img src="../images/smallwrong.png" />
  </div>
  <div class="correct1">
    <img src="../images/smallgreen.png" />
  </div>
</div>