堆栈内存溢出
  繁体   English   中英

按Enter不会提交表单-Javascript

[英]Pressing Enter Won't Submit Form - Javascript

 原文  2013-01-29 06:28:42  1   8    javascript/ forms/ enter

问题描述

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

例如，Apple将重定向到Apple.com（仅作为示例，不在我的网站上）。

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

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

8 个解决方案

解决方案1
 2  

如果你可以使用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(); ...}

解决方案2
 2 已采纳  2013-01-29 06:37:00

它需要单击，因为调用该函数的唯一事情是输入onClick事件。 摆脱onClick="Login()"并在<input>更改type="submit"并将onSubmit="Login()"到<form> 

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

解决方案3
 1  2016-02-06 01:45:44

如前所述，问题在于您依靠onClick事件来触发javascript函数，因此需要单击。

此外，在文本字段中按“ Enter”键触发表单提交的行为取决于是否存在：

  • 只有一个文本字段，或者
  • 表单上某处的<input type='submit'> （或者也许<button type='submit'>等）。

（可以在此处找到有关该特定行为及其原因的更详细的讨论： 按下回车键时未提交表格 ）

由于表单中只有一个文本字段，因此按Enter可以正确触发submit操作； 因此，您需要使用其onSubmit=属性（或使用jQuery或其他一些JavaScript代码）将相同的事件处理程序添加到表单中，以捕获表单的onSubmit= submit()事件onSubmit=方式具有一些优点，但实际上等效于此目的）。 

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

（我将函数重命名为redirect()因为这似乎是我们正在做的，而不是在此处登录。而且， return false;在函数调用之后，该表单将停止实际提交任何内容，因为我们（而是使用javascript函数处理它。（不return false;默认情况下，表单将提交给URI设置为表单的action=属性；如果未设置，则它们将提交给当前URL。可以都使用javascript处理表单，然后将数据提交到服务器端处理程序，在这种情况下，它将return true （默认）。

我对此做了一个有效的jsfiddle以及其他一些更改（说明如下）： 

 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; }不是if (keyword="keyword") { window.location = "location"; done=1; } if (keyword="keyword") { window.location = "location"; done=1; } if (keyword="keyword") { window.location = "location"; done=1; }对于每一种情况下，为什么不把一本字典地图（技术上在JavaScript对象，但哦）映射所有可用的关键字网址吗？ ： 

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

然后，我们可以执行以下done=0 ，而不是在开始时设置done=0 ，在每个分支中done=1并在末尾进行检查： 

  if (keyword in keyword_map) {
    // redirect to keyword_map[keyword]

  } else {
    alert("WARNING:Incorrect keyword you plonker!!!");
  }

而不是键入http://www. 对于每个位置，只需存储基本网址，然后每次都应用该协议即可。

为了甚至在以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!!!");
  }

现在，您有了一个框架，可以更干净，更优雅地完成您想做的事情，希望这种解释有助于您对正在发生的事情有所了解。 :)

解决方案4
 0  2013-01-29 06:32:02

好吧，这很正常。 您在点击事件中调用了函数。 为此，您必须侦听表单上的“ onSubmit”事件。 并且您应该提交而不是按钮。

解决方案5
 0  2013-01-29 06:35:02

该功能会在按下enter键时触发按钮的click事件 

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

解决方案6
 0  2013-01-29 06:39:55

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

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

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

解决方案7
 0  2013-01-29 06:40:03

$(document).ready(function() {
 $("input[name=keyword]").keydown(function(event) {

                if ( event.keyCode == 13)
                 {
                        //do something
                 }

            });
});

解决方案8
 0  2013-01-29 06:40:58

尝试更改此行：

<input type="button" value="Login!" onClick="Login()">

对此：

<input type="submit" value="Login!">

并向表单添加onSubmit：

<form name="enter_keyword" onSubmit="Login();">

这是我更喜欢这样做的方法，并且对我一直有效。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 按ENTER时提交表单的Javascript 在提交表单上按Enter 按回车时文本输入字段不会提交 按回车键提交表格？ JavaScript表单无法提交 如何通过按Enter或提交按钮提交表单？ 如何在文本区域中按 Enter 时提交表单 角度4通过按下登录按钮提交表格 提交表单，没有操作属性按Enter键 JavaScript：在Enter上提交表单
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM