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

时间:2022-08-23 23:02:18

I have created a div in a table format that I am using to filter data options. I am having problems with pressing enter from inside the text box. When I press enter, the alert appears, but the page just reloads and isn't properly filtered with any of the options. Can anyone explain to me what is going on?

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

Please let me know if I was unclear or need to explain anything!

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

This is what my filter option bar looks like:

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

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

HTML:

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:

使用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>

SOLVED:

解决了:

I used jQuery click to call the same function used as the button.

我用jQuery点击调用与按钮相同的功能。

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

2 个解决方案

#1


4  

I would suspect you are getting an error in your validate() function. Try putting the alert after you call the validate() and see if you still receive the alert message. Like this...

我怀疑你在validate()函数中遇到错误。在调用validate()后尝试发出警报,看看是否仍然收到警报消息。喜欢这个...

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

#2


0  

It looks like the issue as described in your question 'How to call function on text input enter key pressed?' is not an issue since you have the proper events set up to listen to the Enter key. What you need to do is to fix your validate function to update the UI. Try to move the alert to the first line of the validate function and go from there to figure out where your code is breaking.

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

Also, it looks like your HTML could be fixed up... tags are old-school deprecated code. You can't have nested tags. And last you aren't closing your tags properly. The issues you are experiencing could be related, especially with the nested tags as the browser would attempt to fix your HTML and who knows which post parameters the form would be sending.

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

Tip: Use Chrome web inspector's console to see exactly where your code is breaking. View->Developer->Javascript Console

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

#1


4  

I would suspect you are getting an error in your validate() function. Try putting the alert after you call the validate() and see if you still receive the alert message. Like this...

我怀疑你在validate()函数中遇到错误。在调用validate()后尝试发出警报,看看是否仍然收到警报消息。喜欢这个...

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

#2


0  

It looks like the issue as described in your question 'How to call function on text input enter key pressed?' is not an issue since you have the proper events set up to listen to the Enter key. What you need to do is to fix your validate function to update the UI. Try to move the alert to the first line of the validate function and go from there to figure out where your code is breaking.

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

Also, it looks like your HTML could be fixed up... tags are old-school deprecated code. You can't have nested tags. And last you aren't closing your tags properly. The issues you are experiencing could be related, especially with the nested tags as the browser would attempt to fix your HTML and who knows which post parameters the form would be sending.

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

Tip: Use Chrome web inspector's console to see exactly where your code is breaking. View->Developer->Javascript Console

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