html
<section data-class="text">
<form id="dbbd" >
<input type="text" name="word" id="kw" onkeydown="if (!window.__cfRLUnblockHandlers) return false; if(isEnter(event)){bdyx.click();return false;}" placeholder="百度一下,你就知道" data-cf-modified-6bbfa88c0c8174bd5ca221a2-="">
<input type="button" onclick="if (!window.__cfRLUnblockHandlers) return false; formSubmit()" id="bdyx" value="百度一下" data-cf-modified-6bbfa88c0c8174bd5ca221a2-="">
</form>
</section>
javascript
function formSubmit(){
var searchValue=document.getElementById("kw").value;
var submitValue=searchValue;
var a=document.createElement('a');
var href="https://baidu.com/s?word=" + submitValue;
a.setAttribute('href',href);
a.setAttribute('target','_blank');
a.setAttribute('id','myLink');
if(document.getElementById("myLink")){
document.body.removeChild(document.getElementById("myLink"));
}
document.body.appendChild(a);
a.click();
}
function isEnter(ev)
{
var ev = ev || window.event;
var keycode;
if(window.event) keycode = ev.keyCode;
else keycode = ev.which;
if(keycode == 10 || keycode == 13) return true;
else return false;
}
css
#bdyx{ cursor: pointer;
width:120px;
height: 44px;
line-height: 45px;
background-color: #4e6ef2;
font-size: 1rem;
color: #fff;
box-shadow: none;
font-weight: 400;
border: none;
}
#kw{
max-width: 500px;
height: 44px;
width: 70%;
font-size: 1rem;
border: 2px solid #c4c7ce;
box-shadow: none;
background: #fff;
color: #222;
overflow: hidden;
}
#kw:focus {
border-color: #000;
}
#dbbd{text-align: center;
}
#bdyx:hover {
background-color: #333;
}
js
function search() {
if (document.getElementById("kw").value != "") {
window.location.href = "https://www.baidu.com/s?wd=" + document.getElementById("kw").value;
}
return false;
}
html
<div class="u" style="text-align: center;">
<form onsubmit="return search()">
<input id="kw" type=text autocomplete="off" autofocus>
<button id="bdyx" onclick="return search()">百度一下</button>
</form>
</div>
参考
js小练习--百度输入框搜索_一只829的博客-CSDN博客
https://blog.csdn.net/qq_63533863/article/details/123696475
百度联想词搜索框完整实现 - 灰信网(软件开发博客聚合)
https://www.freesion.com/article/1128109004/