用js写一个真的百度搜索框
时间: 2024-04-06 14:30:59 浏览: 16
好的,以下是一个简单的 HTML 和 JavaScript 实现的百度搜索框:
```html
<!DOCTYPE html>
<html>
<head>
<title>百度搜索框</title>
</head>
<body>
<input type="text" id="searchInput" placeholder="请输入搜索内容">
<button onclick="search()">搜索</button>
<script>
function search() {
var keyword = document.getElementById("searchInput").value;
window.location.href = "https://www.baidu.com/s?wd=" + encodeURIComponent(keyword);
}
</script>
</body>
</html>
```
这个搜索框中,我们使用了一个 `input` 元素作为搜索框,在用户输入搜索关键词后,点击搜索按钮,就会调用 `search()` 方法,该方法会获取用户输入的搜索关键词,然后通过 `window.location.href` 将用户重定向到百度搜索结果页面。
需要注意的是,我们使用 `encodeURIComponent()` 函数对搜索关键词进行编码,以避免出现特殊字符导致搜索失败的情况。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![xlsx](https://img-home.csdnimg.cn/images/20210720083732.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pptx](https://img-home.csdnimg.cn/images/20210720083543.png)