我正在寻找一个用于新标签页的Chrome扩展程序。我已经编写了页面,并且只有在将我的Javascript从内联移动到外部时遇到问题,它才能正常工作。
当前index.html看起来像这样:
<script>
function process()
{
var url="https://www.google.co.uk/search?q=" + document.getElementById("goog").value;
location.href=url;
return false;
}
</script>
<div class="container">
<form onSubmit="return process();">
<input type="text" class="form-control" id="goog" placeholder="Google Search">
<input type="submit" style="display:none"/>
</form>
我尝试了几种将其移动到外部文件中的方法,但是我对Javascript不太满意。我以为我需要使用某种事件监听器。我尝试将其放在search.js中:
var form = document.getElementById("search");
form.addEventListener("submit", function() {
var url="https://www.google.co.uk/search?q=" + document.getElementById("goog").value;
location.href=url;
return false;
});
修改后的html:
<form id="search">
<input type="text" class="form-control" id="goog" placeholder="Google Search">
<input type="submit" style="display:none"/>
</form>
但无济于事。有人可以帮忙吗?
最佳答案
您正在将'submit'事件附加到文本输入元素。
您应该将其附加到表单,因为它是提交的表单,而不仅仅是特定的输入。 (您已经在当前的index.html文档中正确执行了此操作)。
您可以通过向表单元素添加ID来完成此操作:
<form id="your-form-id">
然后将事件附加到它,就像您已经在做的一样:
var form = document.getElementById("your-form-id");
form.addEventListener("submit", function() { ...
另外,请注意,除非在将JS代码移动到外部文件时更改了html,否则在“ submit”事件回调中,您将尝试在输入文本时从具有id =“ url”的元素获取搜索字符串元素具有id =“ goog”,因此您将无法检索它。
编辑:
问题似乎是表单提交被执行,并且您可以在运行代码之前使用新的空白输入将您重定向到同一页面。
您可以在接收到事件时避免在事件上调用preventDefault(),这样就不会提交表单并运行您的代码,而不是在最后返回false。
form.addEventListener("submit", function(event) {
event.preventDefault();
... your code ...