【问题标题】:Pressing Enter Won't Submit Form - Javascript按 Enter 不会提交表单 - Javascript
【发布时间】:2013-01-12 16:05:30
【问题描述】:

我正在构建一个基本网站,我希望用户能够在其中输入将他们重定向到特定页面的“关键字”。不同的关键字会重定向到不同的页面。

例如,Apple 将重定向到 Apple.com(只是一个示例,不在我的网站上)。

我在另一个网站上找到了另一个人的 Javascript(见下文)。除了一个小细节外,它几乎完美无缺——用户必须单击按钮才能进行重定向。按回车键不起作用。我尝试将输入类型更改为“提交”而不是“按钮”,但仍然没有运气。有人有什么建议吗?

<script type="text/JavaScript">
<!--
function Login(){
var done=0;
var keyword=document.enter_keyword.keyword.value;
//keyword=keyword.toLowerCase();
if (keyword=="toms") { window.location="http://www.toms.com"; done=1; }
if (keyword=="apple") { window.location="http://www.apple.com"; done=1; }
if (keyword=="orange") { window.location="http://www.orange.com"; done=1; }
if (done==0) { alert("WARNING:Incorrect keyword you plonker!!!"); }
}
//-->
</script> 

</head>

<body>

<form name=enter_keyword>
<table border="1" cellpadding="2" cellspacing="2" bgcolor="#7B97E0">
<tr>
<td>
<font color="#ffffff"><b>Enter keyword:</b></font>
</td>
<td><input type=text name=keyword>
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=button value="Login!" onClick="Login()">
</td>
</tr>
</table>
</form>

【问题讨论】:

    标签: javascript forms enter


    【解决方案1】:

    这很正常。您在点击事件上调用了您的函数。为此,您必须收听表单上的“onSubmit”事件。你应该放一个提交而不是一个按钮。

    【讨论】:

      【解决方案2】:

      这个函数会在按下enter时触发按钮的click事件

      $("input[name=keyword]").keyup(function(event){
          if(event.keyCode == 13){
              $("input[type=button]").click();
          }
       });
      

      【讨论】:

        【解决方案3】:

        如果你可以使用 jquery 使用这个

        $(document).ready(function() {
          $(window).keydown(function(event){
            if(event.keyCode == 13) {
              event.preventDefault();
              return false;
            }
          });
        });
        

        否则使用这个 我将表单设置为 onsubmit="return false" 并这样做了

        <input type="button" value="Submit" onClick="document.Survey.submit()" style="font-size: 1.25em;">
        

        或者使用这个

        $("#form").submit( function (e) {
            e.preventDefault(); ...}
        

        【讨论】:

          【解决方案4】:

          它需要单击,因为调用该函数的唯一方法是输入onClick 事件。去掉 onClick="Login()" 并在您的 &lt;input&gt; 中更改 type="submit" 并将 onSubmit="Login()" 添加到您的 &lt;form&gt; 中

          <script type="text/JavaScript">
          <!--
          function Login(){
          var done=0;
          var keyword=document.enter_keyword.keyword.value;
          //keyword=keyword.toLowerCase();
          if (keyword=="toms") { window.location="http://www.toms.com"; done=1; }
          if (keyword=="apple") { window.location="http://www.apple.com"; done=1; }
          if (keyword=="orange") { window.location="http://www.orange.com"; done=1; }
          if (done==0) { alert("WARNING:Incorrect keyword you plonker!!!"); }
          }
          //-->
          </script> 
          
          </head>
          
          <body>
          
          <form name=enter_keyword onSubmit="Login()">
          <table border="1" cellpadding="2" cellspacing="2" bgcolor="#7B97E0">
          <tr>
          <td>
          <font color="#ffffff"><b>Enter keyword:</b></font>
          </td>
          <td><input type=text name=keyword>
          </td>
          </tr>
          <tr>
          <td colspan=2 align=center>
          <input type=submit value="Login!">
          </td>
          </tr>
          </table>
          </form>
          

          【讨论】:

            【解决方案5】:

            在表单中使用onsubmit 事件属性:

            <form name="enter_keyword"  onsubmit="Login()">
            

            保持输入类型=按钮提交。

            【讨论】:

              【解决方案6】:
              $(document).ready(function() {
               $("input[name=keyword]").keydown(function(event) {
              
                              if ( event.keyCode == 13)
                               {
                                      //do something
                               }
              
                          });
              });
              

              【讨论】:

                【解决方案7】:

                尝试更改此行:

                &lt;input type="button" value="Login!" onClick="Login()"&gt;

                到这里:

                &lt;input type="submit" value="Login!"&gt;

                并在表单中添加一个 onSubmit:

                &lt;form name="enter_keyword" onSubmit="Login();"&gt;

                这是我更喜欢这样做的方式,它总是适合我。

                【讨论】:

                  【解决方案8】:

                  如前所述,问题在于您依赖onClick 事件来触发您的javascript函数,因此需要点击。

                  此外,在文本字段中按“Enter”以触发表单提交的行为取决于:

                  • 只有一个文本字段,或者
                  • 一个&lt;input type='submit'&gt;(或者&lt;button type='submit'&gt;等,在表格的某处。

                  (有关该特定行为及其原因的更详细讨论可在此处找到:Form not submitting when pressing enter)

                  由于表单中只有一个文本字段,因此在按 Enter 时正确触发了submit 操作;那么你需要捕获表单的submit() 事件,使用它的onSubmit= 属性(或者,使用jQuery 或其他一些javascript 代码,将相同的事件处理程序添加到表单。jQuery 方式有一些优点,但在此目的上它实际上是等效的)。

                  <form name="enter_keyword" onSubmit="javascript:redirect(); return false;">
                  

                  (我已将函数重命名为redirect(),因为看起来这就是我们正在做的事情,而不是在这里登录。此外,函数调用之后的return false; 将阻止表单实际提交任何内容,因为我们使用 javascript 函数来处理它。(没有return false;,默认情况下,表单将提交到 URI 设置为表单的 action= 属性;如果未设置,它们将提交到当前 URL . 可以使用 javascript 处理表单,然后将数据提交给服务器端处理程序,在这种情况下,它会return true(这是默认值)。)

                  我做了a working jsfiddle of this,以及其他一些更改(解释如下):

                  function redirect() {
                    // var done=0;
                    var keyword = document.enter_keyword.keyword.value;
                    //keyword=keyword.toLowerCase();
                    //alert(keyword);
                  
                    var keyword_map = {
                      'toms': 'toms.com',
                      'apple': 'apple.com',
                      'orange': 'orange.com'
                    }
                  
                    var protocol = document.location.protocol; // to handle https://, etc., like here on jsfiddle
                  
                    if (keyword in keyword_map) {
                      var target_url = protocol + '//' + keyword_map[keyword];
                      alert("Attempting to redirect you to: " + target_url);
                      window.location = target_url;
                  
                    } else {
                      alert("WARNING:Incorrect keyword you plonker!!!");
                    }
                  
                    /*
                    if (keyword=="toms") { window.location = protocol + "www.toms.com"; done=1; }
                    if (keyword=="apple") { window.location = protocol + "www.apple.com"; done=1; }
                    if (keyword=="orange") { window.location= protocol + "www.orange.com"; done=1; }
                  	if (done==0) { alert("WARNING:Incorrect keyword you plonker!!!"); }
                    */
                  
                  
                  }
                  <form name="enter_keyword" onSubmit="javascript:redirect(); return false;">
                    <table border="1" cellpadding="2" cellspacing="2" bgcolor="#7B97E0">
                      <tr>
                        <td>
                          <font color="#ffffff"><b>Enter keyword:</b></font>
                        </td>
                        <td>
                          <input type=text name=keyword>
                        </td>
                      </tr>
                      <tr>
                        <td colspan=2 align=center>
                          <input type=submit value="Go!">
                        </td>
                      </tr>
                    </table>
                  </form>

                  为什么不为每个案例硬编码if (keyword="keyword") { window.location = "location"; done=1; },而不是制作一个字典映射(技术上是javascript中的一个对象,但是哦)将所有可用的关键字映射到url? :

                    var keyword_map = {
                      'toms': 'toms.com',
                      'apple': 'apple.com',
                      'orange': 'orange.com'
                    };
                  

                  那么,不用在开始时设置done=0,在每个分支中设置done=1,并在最后检查,我们可以这样做:

                    if (keyword in keyword_map) {
                      // redirect to keyword_map[keyword]
                  
                    } else {
                      alert("WARNING:Incorrect keyword you plonker!!!");
                    }
                  

                  而不是为每个位置键入http://www.,只需存储基本 url,然后每次应用协议。

                  因此,即使在以 https:// 提供服务的网站上(例如,jsfiddle,如果您已登录),这也可以工作,我们可以检查当前页面的协议,并在前面添加:

                    var protocol = document.location.protocol; // to handle https://, etc., like here on jsfiddle
                  
                    if (keyword in keyword_map) {
                      var target_url = protocol + '//' + keyword_map[keyword];
                      alert("Attempting to redirect you to: " + target_url);
                      window.location = target_url;
                  
                    } else {
                      alert("WARNING:Incorrect keyword you plonker!!!");
                    }
                  

                  现在您有了一个框架,可以更简洁、更优雅地完成您想要做的事情,希望这个解释有助于增加您对正在发生的事情的理解。 :)

                  【讨论】:

                    猜你喜欢
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 2016-10-01
                    • 2011-05-29
                    • 1970-01-01
                    • 1970-01-01
                    • 2010-09-19
                    • 2013-03-03
                    相关资源
                    最近更新 更多