Question

我用表格格式创建了一个div，用于过滤数据选项。我在文本框内按Enter键时遇到问题。当我按Enter键时，会出现警告，但页面只是重新加载，并且没有使用任何选项正确过滤。任何人都可以向我解释发生了什么事吗？

如果我不清楚或需要解释任何事情，请告诉我！

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

enter image description here

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

我怀疑你在validate（）函数中遇到错误。在调用validate（）后尝试发出警报，看看是否仍然收到警报消息。像这样......

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

Answer 2

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

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

提示：使用Chrome网络检查员控制台可以准确查看代码的中断位置。查看 - ＆gt;开发人员 - ＆gt; Javascript控制台

如何调用文本输入功能输入键按下？

2 个答案: