JavaScript实现form提交，回车提交URL地址伪静态 原创
<p>文本框（input element）里输入内容后，直接Enter回车键提交表单（form），是很方便的，也很人性化，便于用户使用。比如一个搜索框，希望输入完关键词之后直接按回车键立即提交表单，但如果不使用form提交，用JavaScript来实现提交动作，而且提交URL地址伪静态化，不想带问号和搜索关键词，搜索框内enter回车键自动提交，那么应该如何实现呢。笔者下面将用实际代码来展示。</p><p>下面是html中的简单form表单：</p>
<p>1、一个id是keywords的搜索框；<br />2、placeholder是文本框默认提示文字；<br />3、onkeydown是在该文本框中按下动作时触发事件，event.keyCode==13表示按下的是“ENTER”回车键，触发JavaScript的formsubmit函数。注意这里有return。<br />4、点击“搜索”按钮会触发formsubmit函数<br />备注：点击“搜索”按钮和搜索框内enter回车键触发的时同一个函数</p>
<div class="jb51code"><pre class="brush:xhtml;"><form id="form" method="get" action="">
<input type="text" id="keywords" name="keywords" value="" placeholder="请输入关键词" onkeydown="if(event.keyCode==13){return formsubmit();}"/>
<input type="button" value="搜索" onClick="formsubmit()">
</form></pre></div>
<p>下面是JavaScript的formsubmit函数：</p>
<p>1、获取文本框keywords的输入值，如果为空提示“请输入查询关键词！”；如果存在keywords进行下一步<br />2、用keywords取得的，伪造URL伪静态链接（后端程序设计好）<br />3、window.location.href跳转到url页面<br />4、注意这里的return false，可以使得上面的form不主动提交</p>
<div class="jb51code"><pre class="brush:js;"><script>
function formsubmit(){
var keywords = $('#keywords').val();
if (keywords) {
url = '/search/'+keywords+'.html';
window.location.href = url;
}else{
$('#keywords').focus();
alert("请输入查询关键词！");
}
return false;
}
</script></pre></div>
<p>如果不需要提交URL伪静态，可以直接在form中action里写入url，也可以在JavaScript中改变form中action的值，进行form提交。keywords就会变成参数加到跳转链接里。</p>
<div class="jb51code"><pre class="brush:js;"><script>
function formsubmit(){
var keywords = $('#keywords').val();
if (keywords) {
url = 'search.php';
$("#form").attr('action',url);
$("#form").submit();
}else{
$('#keywords').focus();
alert("请输入查询关键词！");
}
return false;
}
</script></pre></div>
<p>总结：上面的例子介绍了form使用javascript提交时，点击“搜索”按钮能提交，搜索框内也能使用enter回车键提交的方法和代码。详细解释了原理和各个代码的含义，简单易懂，便于学习。</p> 感谢楼主的分享！这个功能确实很实用，用户体验会好很多。
看完帖子后有个小问题想请教一下：如果搜索关键词包含特殊字符或者中文空格的话，URL伪静态化会不会出现404错误？需不需要对关键词进行URL编码处理？
另外还想补充一点，如果想要更优雅一些，可以给form表单添加一个监听回车键的事件监听器，而不是直接在HTML标签里写onkeydown，这样可以让HTML和JavaScript代码分离得更清晰：
document.getElementById('keywords').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
formsubmit();
}
});
还有一个小建议，帖子最后一部分的form提交方式，如果关键词是中文的话，直接用GET方式提交可能会出现中文乱码问题，建议在后端做好编码处理。
总体来说讲解得很清楚，对于新手来说很容易上手！支持原创！期待楼主更多好文分享！ 回帖：用JS实现回车提交并伪静态化URL其实很简单，核心就是监听搜索框的键盘事件，然后拼出你想要的路径格式，再用 pushState 替换或直接跳转。我这里分享一个自己常用的实现方案，楼主可以参考一下。
// 假设搜索框 id="keywords"
const input = document.getElementById('keywords');
input.addEventListener('keydown', function(e) {
if(e.key === 'Enter' || e.keyCode === 13) {
e.preventDefault();// 阻止默认回车提交
const keyword = encodeURIComponent(input.value.trim());
if(!keyword) return;// 空值不提交
// 伪静态路径，例如 /search/关键词
const url = '/search/' + keyword + '.html';
// 方式一：直接跳转
// window.location.href = url;
// 方式二：用 history.pushState 无刷新修改地址，再调用后续逻辑
history.pushState(null, '', url);
// 这里可以放你的实际搜索请求代码，比如 Ajax
doSearch(keyword);
}
});
几点说明：
[*]用 encodeURIComponent 处理中文和特殊字符，避免 URL 异常。[*]路径后缀 .html 可以让后端做 rewrite 匹配，看起来更干净。[*]如果只是要页面跳转，直接把 window.location.href 那行取消注释就行；如果需要在当前页异步加载结果，就用 pushState 搭配 Ajax，用户体验更好。
另外，如果还需要兼容移动端，记得事件用 keydown 就行，一般没问题。
希望有帮助，有更好的写法欢迎继续交流～
頁:
[1]