Question

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

例如，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>

Answer 1

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

Answer 2

它需要单击，因为调用该函数的唯一事情是输入onClick事件。摆脱onClick="Login()"并更改type="submit"中的<input>并将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>

Answer 3

如前所述，问题在于您依靠onClick事件来触发您的javascript功能，因此需要点击。

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

只有一个文字字段，或
表单上的<input type='submit'>（或者<button type='submit'>等等。

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

由于表单中只有一个文本字段，因此在按Enter键时正确触发submit操作;所以你需要使用它的submit()属性（或者，使用jQuery或其他一些javascript代码）来捕获表单的onSubmit=事件，以向表单添加相同的事件处理程序。 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中的对象，但很好）将所有可用的关键字映射到网址？：

  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.，只需存储基本网址，然后每次都应用协议。

这样即使在以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!!!");
  }

现在你有了一个框架，可以更干净，更优雅地完成你想要做的事情，希望这个解释有助于增加你对正在发生的事情的理解。：）

Answer 4

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

Answer 5

此功能将在按click

时触发enter按钮事件

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

Answer 6

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

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

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

Answer 7

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

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

            });
});

Answer 8

尝试更改此行：

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

对此：

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

并在表单中添加onSubmit：

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

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

按Enter键不会提交表单 - Javascript

8 个答案: