如何在文本输入上调用函数输入键按下？

Question

我创建了一个表格格式的 div，用于过滤数据选项。 我在从文本框中按 Enter 时遇到问题。当我按下回车键时，会出现警报，但页面只是重新加载并且没有使用任何选项正确过滤。谁能给我解释一下这是怎么回事？

如果我不清楚或需要解释什么，请告诉我！

这是我的过滤选项栏的样子：

HTML：

<form name="myform">

   <center><table id="mykeyTable" border="1" cellspacing="10" cellpadding="10">
   <center></center>

</td>


<!--Search bar -->
   <tr>
    <td colspan="4">
    <center>
      <form>
        Starts With: <input type="text" id="myText" value=""><br>
      </form>
    </center>
   </tr>

<!-- Site Options -->
  <td><center>Site</center><br>
                  <input type="radio" name="siteID" onclick="updateSiteID(this.value)" value="Asc"checked>
                  <input type ='button' id='siteIDChosen' class='button-addAsc'/>
              <br>
                  <input type="radio" name="siteID" onclick="updateSiteID(this.value)" value="Desc" >
                  <input type ='button' id='siteIDChosen' class='button-addDesc'/>
              <br>
         </input>
     </form></td>

<!-- Status options -->

    <td><center>Status
   <br><br></center><input type="radio" name="siteStatus" onclick="updateSiteStatus(this.value)"value="Online"> Online<br><input type="radio" name="siteStatus" onclick="up\
dateSiteStatus(this.value)" value="Offline"> Offline<br><input type="radio" name="siteStatus" onclick="updateSiteStatus(this.value)" value="Both" checked> Both </form></td\
>



<!-- usage plan -->
   <td><center>Usage Plan (in MB)</center>
<br><input type="radio" name="usagePlan" onclick="updateUsagePlan(this.value)" value="yesUsagePlan"> Data Plan<br><input type="radio" name="usagePlan" onclick="updateUsage\
Plan(this.value)" value="noUsagePlan"> No Data Plan<br><input type="radio" name ="usagePlan" onclick="updateUsagePlan(this.value)" value="bothUsagePlan" checked> All Plans\
</form></td>



     </table>
<br>
<form><input type='button' id='filter' name='Submit' onclick='validate()' class='button-add' value=" Filter Selections"/></form>

</center>

</form>
</div>

Javascript：

<script>


$("#myText").keypress(function(event) {
    if (event.which == 13) {
      alert("You pressed enter");
     validate();

    }
});



$(document).keypress(function(event){
    if(event.keyCode == 13){

        validate();
    }
});




function validate() {
//...
}

</script>

---

已解决：

我使用 jQuery click 来调用与按钮相同的函数。

$(document).keypress(function(event){
    if(event.keyCode == 13){
     $('#filter').click();
      //  validate(); doesn't need to be called from here
    }
});

Answer 1

它看起来像您的问题“如何在文本输入上调用函数按下输入键？”中描述的问题不是问题，因为您设置了适当的事件来收听 Enter 键。您需要做的是修复您的验证功能以更新 UI。尝试将警报移动到 validate 函数的第一行，然后从那里找出代码中断的位置。

此外，看起来您的 HTML 可以修复...标签是老式的已弃用代码。你不能有嵌套标签。最后，您没有正确关闭标签。您遇到的问题可能与此有关，尤其是嵌套标签，因为浏览器会尝试修复您的 HTML，并且谁知道表单将发送哪些 post 参数。

提示：使用 Chrome 网络检查器的控制台可以准确查看代码中断的位置。查看->开发者->Javascript控制台

Answer 2

我怀疑您在 validate() 函数中遇到了错误。在调用 validate() 后尝试发出警报，看看是否仍然收到警报消息。像这样……

$("#myText").keypress(function(event) {
    if (event.which == 13) {
        validate();
        alert("You pressed enter");
     }
});