上图为实现效果
代码如下:
<script>
function butClick() {
var val = document.getElementById("search_key").value;
if(val.length === 0){
alert('搜索为空,请输入内容');
return false;
}else{
var open_url = "https://www.baidu.com/s?ie=utf-8&wd=" + val;
window.open(open_url);
}
}
document.onkeydown = function (e) {
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
butClick();
}
}
</script>
<div class="layui-clear">
<a href="" class="baidulogo" target="_blank"> <img src="/www_moban_kim-images/bd_logo.png"></a>
<input type="search" id="search_key">
<a class="btn" target="_blank" href="javascript:void(0)" onclick="butClick();">百度一下</a> </div>
上面代码简单解释一下,其中下面代码
<script>
function butClick() {
var val = document.getElementById("search_key").value;
if(val.length === 0){
alert('搜索为空,请输入内容');
return false;
}else{
var open_url = "https://www.baidu.com/s?ie=utf-8&wd=" + val;
window.open(open_url);
}
}
document.onkeydown = function (e) {
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
butClick();
}
}
</script>
js获取到表单的数据,把获取到的,数据和百度搜索URL拼接,然后直接跳转到百度
<div class="layui-clear">
<a href="" class="baidulogo" target="_blank"> <img src="/www_moban_kim-images/bd_logo.png"></a>
<input type="search" id="search_key">
<a class="btn" target="_blank" href="javascript:void(0)" onclick="butClick();">百度一下</a> </div>
上面这段是样式,也就是开头最终实现的样子
这段代码中javascript:void(0)" οnclick="butClick(); 这个是不能变更的,如果你是大神,变更成什么样子,你可以自己来,我不是大神,建议不要更改
下面的代码是直接搜索,不跳转到新页面的
<script>
function butClick() {
var val = document.getElementById("search_key").value;
if(val == "" || val == null || val == 'undefined'){
alert('搜索为空,请输入内容');
return false;
}else{
window.location.href = "https://www.baidu.com/s?ie=utf-8&wd=" + val;
}
}
document.onkeydown = function (e) {
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
butClick();
}
}
</script>
<div class="layui-clear">
<a href="" class="baidulogo" target="_blank">
<img src="/www_moban_kim-images/bd_logo.png"></a>
<input type="search" id="search_key">
<a class="btn" target="_blank" href="javascript:void(0)" onclick="butClick();">百度一下</a>
</div>
这个代码感谢大神:4414站长论坛:小千 ,个人主页https://www.4414.cn/home.php?mod=space&uid=10367,的无私解决问题,感谢感谢!