Javascript 在 Internet Explorer 中的行为很有趣答案

【问题标题】：Javascript acting funny in Internet ExplorerJavascript 在 Internet Explorer 中的行为很有趣
【发布时间】：2012-11-26 03:57:46
【问题描述】：

我有一个网站，我希望人们能够在文本框中输入内容并根据他们输入的内容发送到该目录。

说出客户编号，因此我们有客户#155。他的发票在文件夹/invoices/155 目录中。我希望他能够输入他的客户 # 并通过单击按钮定向到包含他所有发票的目录。

现在我已经编写了以下代码，但它仅在我用鼠标单击按钮时才有效。在 Internet Explorer 中，当我按下回车键时，它在地址栏中给了我一堆 gook，但什么也没做。地址栏是这样的：

file:///C:/Users/My%20Name/Desktop/test.html?dir=%2Finvoices%2F&userinput=155

而不是加载文件夹/invoices/155/。

<html>
<head>
<title>test</title>
</head>
<form name="goto" action="">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text"> <input type="button" value="try me" onclick="window.location=this.form.dir.value+userinput.value">

</form>

谁能告诉我代码有什么问题以及我可以做些什么来修复它？提前致谢。

【问题讨论】：

标签： javascript url redirect

【解决方案1】：

如果您使用文件协议，它将无法正常工作。尤其是在 IE 中。你需要一个真正的网络服务器。

让客户输入他的身份是非常不安全的。任何人都可以输入任何 id。使用登录名。

清理每个用户输入以防止滥用是非常重要的。

还有很长的路要走。

【讨论】：

每个客户目录都有一个 .htaccess 文件，其密码为 MD5 哈希。这只是为了让他们进入他们的发票目录，这样他们就不必记住地址。
yunzen 这个文件被上传到一个apache2服务器供参考。
那么你必须将该服务器的http地址添加到location.href
没关系。该文件位于 / 目录中。所以指定整个地址与目录下的/invoices/位置相同。但只是为了大便和咯咯笑，我更改了它并得到了与原始文件完全相同的结果。
您可能不应该在本地文件系统上拥有您的启动文件，但已经在 websserver 上。 IE 可能不会按照您的意愿提交表单。

【解决方案2】：

我认为你应该在<form> 上选择onsubmit

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script>
        function handleFormSubmit(form)
        {
            window.location = form.dir.value + form.userinput.value;
            return false;
        }
    </script>
</head>
<body>
    <form onsubmit="return handleFormSubmit(this)">
            <input name="dir" type="hidden" value="/invoices/">
            <input name="userinput" type="text">
            <input type="submit" value="try me" >    
    </form>
</body>
</html>

顺便说一句：
内联javascript不是很好。使用脚本标签或外部 .js 文件。

编辑：
哎呀！好的，错误是我写了this.form.dir，但它必须是this.dir，因为this 已经引用了表单，现在javascript 处理程序位于form 标记(onsubmit="<handler-code>") 上。那行得通 - http://jsfiddle.net/Q875a/

编辑 2：
内联 javascript 意味着您在 html 标记中编写 javascript 代码（form、input、...）在onXXX 属性 - 它不可读。将您的脚本放在处理程序函数中的script 标记中（即handleFormSubmit）使其更具可读性，特别是如果您的网站在其中包含越来越多的脚本 - 请参阅当前脚本和onsubmit-attribute。

最后，如果你想更进一步跨浏览器，强大的javascript开发你应该看看jQuery - 这是真正专业和退出javascript的大门编程！

要测试的JSFiddle：
http://jsfiddle.net/yNTK5/

关于该主题的jQuery-links：
http://api.jquery.com/submit/
http://api.jquery.com/on/
http://api.jquery.com/ready/

【讨论】：

Warappa 感谢您的建议，我会尝试一下。还有什么是内联javascript？什么是脚本标签？我是 javascript 编程新手。
我尝试了你的建议 warappa 并且发生了同样的事情。现在没有任何效果。 :-(

【解决方案3】：

在某些浏览器中，即使没有提交按钮，也会在您按 Enter 时发布表单。使用提交按钮，并抓住提交，然后处理所有情况：

<form name="goto" action="" onsubmit="window.location=this.dir.value+this.userinput.value;return false;">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text"> <input type="submit" value="try me">
</form>

【讨论】：

Guffa，我根据您的建议更改了代码，现在根本没有任何效果。鼠标单击按钮或回车键都不行。两者都将此字符串发送到地址栏“mydomain.com/test.html?dir=%2Finvoices%2F&userinput=170”。当用户在输入框中输入 170 时，它应该将它们发送到“mydomain.com/invoices/170”请建议如何使这项工作。
@MatthewLenfest：很抱歉这个错误，在提交事件中，访问字段应该只是this 而不是this.form。请参阅上面的更正。