1

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

例如,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>
4

8 回答 8

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(); ...}
于 2013-01-29T06:35:03.150 回答
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>
于 2013-01-29T06:37:00.563 回答
1

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

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

  • 只有一个文本字段,或者
  • 一个<input type='submit'>(或者也许<button type='submit'>,等等,在表格的某个地方。

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

由于表单中只有一个文本字段,因此submit在按 Enter 时正确触发了操作;所以你需要捕获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(这是默认的)。)

我对此做了一个工作 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; }对每种情况进行硬编码,不如制作一个字典映射(技术上是 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!!!");
  }

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

于 2016-02-06T01:45:44.687 回答
0

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

于 2013-01-29T06:32:02.303 回答
0

此函数将触发click按下按钮的事件enter

$("input[name=keyword]").keyup(function(event){
    if(event.keyCode == 13){
        $("input[type=button]").click();
    }
 });
于 2013-01-29T06:35:02.843 回答
0

在表单中使用onsubmitevent 属性:

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

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

于 2013-01-29T06:39:55.790 回答
0
$(document).ready(function() {
 $("input[name=keyword]").keydown(function(event) {

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

            });
});
于 2013-01-29T06:40:03.770 回答
0

尝试更改此行:

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

对此:

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

并在表单中添加一个 onSubmit:

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

这是我更喜欢这样做的方式,它总是对我有用。

于 2013-01-29T06:40:58.497 回答