js部分代码
<script type="text/javascript">
function startSearch(){
var contentText = document.getElementById("content").value;
//"https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&wd="这个地址就是搜索内容地址,将搜索内容获取放入地址,就实现搜索了
var searchAddress = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&wd="+contentText;
window.location.href = searchAddress;
}
//js回车监听事件
document.onkeydown = function (event) {
var e = event || window.event;
if (e && e.keyCode == 13) {
document.getElementById("enter").click();
}
}
</script>
html部分代码
<input type="text" id="content" class="baidu_text" /><input type="submit" id="enter" onClick="startSearch()" class="baidu_button" value="百度一下"/>
css部分代码
.baidu_text{
width:540px;
height:31px;
float: left;
}
.baidu_button{
width:100px;
height:37px;
border:none;
background:#1E90FF;
color: #FFFFFF;
float: left;
}
注:以下这两种写法排版上不同,最终会导致显示不同。
<input type="text" id="content" class="baidu_text" /><input type="submit" id="enter" onClick="startSearch()" class="baidu_button" value="百度一下"/>
下面代码会导致文本框与按钮之间会有间隙,而上面input
标签之间紧挨一起,可以消除文本框与按钮之间会有间隙。而且,要想文本框与按钮之间的高度保持一直,不出现高低不平的现象,就用一个div
将他们装起来,然后一个左浮动,一个右浮动。
<input type="text" id="content" class="baidu_text" />
<input type="submit" id="enter" onClick="startSearch()" class="baidu_button" value="百度一下"/>