搜索框常用代码定位、切换、清除历史纪录。
常用参数:
autocomplete="off" //关闭清除input框输入存留历史值
action="https://www.google.com/search?" //搜索提交网址
name="q" //搜索定义参数
target="_blank" //新窗口打开
搜索框定位:
头部添加定位 ID 参数
<body onload='tsbox.focus()'>
搜索框内定义 ID 即可自动跳转
<input id='tsbox' >
TAB 键 切换定位搜索框:
<input tabindex="1" />
<input tabindex="2" />
<input tabindex="3" />
搜索框内容删除按钮:
<div id="baidu">
<div class="input">
<input type="text" id="search"><span class="clear" id="cls">X</span>
</div>
<button>搜索</button>
</div>
<script type="text/javascript">
document.getElementById("search").addEventListener("keyup",function(){
if(this.value.length>0)
{
document.getElementById("cls").style.visibility="visible";
document.getElementById("cls").onclick=function()
{
document.getElementById("search").value="";
}
}else
{
document.getElementById("cls").style.visibility="hidden";
}
});
</script>
搜索框内容删除按钮(美颜版):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="has-feedback">
<label class="text-info" for="addressId">输入地址</label>
<input class="form-control"id="addressId" name="address">
<!--删除按钮-->
<a class="glyphicon glyphicon-remove btn form-control-feedback"style="pointer-events: auto"></a>
</div>
<script type="text/javascript">
$(function () {
$('a').click(function () {
$('input')[0].value = "";
})
})
</script>
</body>
</html>
百度自定义站内搜索:
<script language="javascript">function search(e){return e.method="get",e.action="http://www.baidu.com/baidu",document.search_form.word.value=document.search_form.word.value+" site:weibo.com",!0}</script>
<form name="search_form" target="_blank" onsubmit="search(this)">
<input type="text" name="word" results="0" placeholder="用百度搜索微博" onblur="this.value=" />
</form>
搜索框代码:
<form class="example" action="action_page.php">
<input type="text" placeholder="搜索.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>