很多时候,搜索的链接太长,带着很多参数,我们想要进行伪静态修改,同时也希望链接能二次访问。
原来的html代码:
我们修改为:
<form class="form-search" id="q-form" method="get">
<div class="input-append" id="q-input">
<input type="text" class="span6 search-query" name="q" title="输入任意关键词皆可搜索"
value="" onkeypress="return handleKeyPress(event)">
<button type="button" class="btn" onclick="submitForm()">搜索</button>
</div>
</form>
<script>
function handleKeyPress(event) {
if (event.keyCode === 13) { // 13是回车键的键码
event.preventDefault(); // 阻止默认行为
submitForm(); // 调用submitForm()方法处理表单提交
}
}
function submitForm() {
// 获取输入框的值
var query = document.getElementById("q-input").querySelector("input[name='q']").value;
// 组合URL
var url = "/moreSearch/" + encodeURIComponent(query) + ".html";
// 重定向到URL
window.location.href = url;
}
</script>
将提交按钮的type属性设置为button,这样它就不会提交表单。然后使用JavaScript来获取输入框的值,并将它们组合成一个URL。最后,使用JavaScript中的window.location.href将页面重定向到新的URL。
如果用户在输入框中按下回车键,它会默认触发表单的提交行为,为了避免这种情况,可以使用JavaScript来截取回车事件,并阻止默认行为。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
- 最新
- 最热
只看作者