搜索框 - 代码笔记

**搜索框常用代码定位、切换、清除历史纪录。**
**常用参数：**

```
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>
```

最后修改：2024 年 10 月 07 日

如果觉得我的文章对你有用，请随意赞赏

搜索框

admin • 2024 年 10 月 07 日