不要给你的input元素设置“action”或“submit”

最新推荐文章于 2024-03-28 11:54:24 发布

众乐-Ryan

最新推荐文章于 2024-03-28 11:54:24 发布

阅读量2k

点赞数

分类专栏： web前端文章标签： web前端 js 解决方案

web前端专栏收录该内容

42 篇文章 0 订阅

订阅专栏

大多数的浏览器都有一个严格意义上来说不能算作bug的bug。实际上，浏览器的本意是让你的工作变得更简单，但是如果你（或者其他人）恰好以某种方式（其实是错误的方式）来写HTML代码的话，就会完全触发该问题。特别的，如果你指定input标签的id或者name属性值为“action”或“submit”，你可能就会触发非常隐藏的bug。

关于该“Bug”的介绍

去年我通读了John Resig 和Bear Bibeault著作的Secrets of the JavaScript Ninja一书。顺便说一下，如果你想写高效、优雅的javascript代码，这绝对是一本非常棒的书。不管怎么样，在第11章，某些内容吸引了我的注意力。如果你在form表单里有一个拥有id和/或name属性的input元素，那么你可以直接通过form元素的某些属性获取到该input元素，该特性被作者称为是“贪婪的ID”（greedy IDs）。

<form id="form" action="url">
    <input type="text" id="textboxid" name="textboxname">
</form>

// Grab the form
var form = document.getElementById('form');
 
// Reference the text box directly from the form by its ID or name
form.textboxid;   // -> The input element
form.textboxname; // -> The input element

这真是一个相当酷的想法，但是这并不是很有必要，因为通过元素的id或者name属性来获取元素也是很容易的。而且，要注意一个非常重要的事实：如果form元素的某个属性名和input元素的id/name值一样，那么该属性就会被input元素所覆盖。

如果你的input元素的id/name属性值被设置为了“action”或“submit”，然后你尝试使用javascript控制提交，那么此时就会变得极其悲剧。现在，如果你想知道form表单数据提交 (通过 form.action提交)的URL，或者你只是想通过写js代码的方式来提交(通过form.submit提交)，那么你将会分别得到一个错误的值和直接报错。

解决方案

我从来没想过我会遇到这个问题，但是我还是碰到了。也许解决该问题的最简单的方法是改写你的input，但是不幸的是有时你可能拿不到HTML代码，而有时你根本不会去拿。而且其他的代码也可能依赖于id/name来做一些事情。因此，如果你没法去直接修改HTML代码，这里还有其他的解决方案。

这种解决方案只能解决form表单元素的属性值是函数的情形。任意值不是函数的属性都将不起作用，即使你尝试用javascript代码去动态修改input元素的id/name属性也毫无用处。不管怎么样，重写值是函数的属性（比如submit），从元素对象的原型获取函数，并将该函数以你想执行的form表单元素为运行环境来执行就能解决问题。

<form id="form" action="url">
    <input type="text" id="submit">
</form>

// Grab the form
var form = document.getElementById('form');
 
// Try to submit it the normal way
form.submit(); // Nope, that's an error
 
// Try to submit using the prototype
HTMLFormElement.prototype.submit.call(form); // Yay! It worked!

我并没有在老版本的浏览器做测试，但是它应该在对较老HTML4支持较好的浏览器上都能正常运行，因为HTMLFormElement最初是在 DOM Level 1规范中被指定的。