前端在点击返回时,清空搜索框form表单中的内容
时间: 2024-02-21 10:58:56 浏览: 23
当用户在前端页面点击返回按钮时,可以使用JavaScript来清空搜索框form表单中的内容。以下是一个简单的示例代码:
```
<form id="searchForm">
<label for="search">Search:</label>
<input type="text" id="search" name="search"><br><br>
<input type="submit" value="Search">
</form>
<script>
// 获取搜索框表单元素
var searchForm = document.getElementById("searchForm");
// 监听页面返回事件
window.addEventListener("popstate", function() {
// 清空搜索框表单内容
searchForm.reset();
});
</script>
```
在这个示例中,我们首先获取了搜索框表单元素,然后监听了页面的返回事件(即用户点击浏览器的返回按钮或者调用`history.back()`方法)。当页面返回时,我们使用`searchForm.reset()`方法清空搜索框表单内容。注意,我们使用了`window.addEventListener()`方法来监听页面的返回事件。
相关问题
帮我写一个网页,内容包括搜索框和搜索结果展示
好的,我可以为您提供一个简单的网页模板,包括搜索框和搜索结果展示的功能。您可以根据您的需求进行修改和定制。
首先,您需要创建一个 HTML 文件,可以取名为 `search.html`。然后,您可以将以下代码复制粘贴到您的 `search.html` 文件中:
```html
<!DOCTYPE html>
<html>
<head>
<title>搜索页面</title>
</head>
<body>
<!-- 搜索表单 -->
<form action="#" method="get">
<input type="text" name="search" placeholder="请输入关键词">
<button type="submit">搜索</button>
</form>
<!-- 搜索结果展示 -->
<div id="search-results">
<!-- 这里将显示搜索结果 -->
</div>
</body>
</html>
```
在这个模板中,我们使用了一个表单来实现搜索框的功能。当用户输入关键词并点击搜索按钮时,表单会向服务器发送 GET 请求,并将搜索关键词作为 URL 参数传递给服务器。在这个例子中,表单的 `action` 属性值为 `#`,表示表单将提交到当前页面。您可以将 `#` 替换为您的服务器端处理搜索请求的 URL 地址。
在搜索结果展示的部分,我们使用了一个 `<div>` 元素来显示搜索结果。实际上,这个 `<div>` 元素是一个空容器,我们将在 JavaScript 中动态添加搜索结果。
接下来,我们需要编写 JavaScript 代码来实现搜索功能和动态展示搜索结果。您可以将以下代码添加到您的 `search.html` 文件中:
```html
<script>
// 当表单提交时,执行搜索操作
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
// 获取搜索关键词
var keyword = document.querySelector('input[name="search"]').value;
// 发送搜索请求
var xhr = new XMLHttpRequest();
xhr.open('GET', 'search.php?keyword=' + encodeURIComponent(keyword));
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 解析搜索结果
var results = JSON.parse(xhr.responseText);
// 清空搜索结果容器
var container = document.querySelector('#search-results');
container.innerHTML = '';
// 动态添加搜索结果
results.forEach(function(result) {
var item = document.createElement('div');
item.classList.add('search-result');
item.innerHTML = '<h3>' + result.title + '</h3><p>' + result.description + '</p>';
container.appendChild(item);
});
}
};
xhr.send();
});
</script>
```
在这个 JavaScript 代码中,我们首先监听表单的 `submit` 事件,当表单提交时,执行搜索操作。我们通过 `document.querySelector()` 方法获取搜索关键词输入框的值,并将关键词作为 URL 参数发送 GET 请求到服务器。
在服务器端,您需要编写一个处理搜索请求的 PHP 脚本,并返回一个 JSON 格式的搜索结果。在这个例子中,我们假设服务器端的搜索处理脚本为 `search.php`,并接受一个名为 `keyword` 的 GET 参数,返回一个包含搜索结果的 JSON 字符串。
在 JavaScript 中,我们使用 `XMLHttpRequest` 对象发送异步请求,并监听 `readystatechange` 事件来获取服务器返回的数据。当服务器返回状态码为 200 时,我们解析 JSON 格式的搜索结果,并动态添加到搜索结果容器中。
最后,您可以根据需要,对搜索结果的样式进行定制。在这个例子中,我们为搜索结果添加了一个 `search-result` 类,方便您进行样式定制。
希望这个简单的网页模板对您有所帮助!
bootstrap4模仿写一个百度搜索框,增加防抖,输入框增加清除功能,点击搜索必须要等待请求结果返回后才能继续点击
好的,我可以为您提供一个简单的实现示例,使用Bootstrap 4、jQuery和防抖函数进行搜索框的制作,以下是代码:
HTML:
```html
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6">
<form>
<div class="form-group">
<input type="text" class="form-control" id="searchBox" placeholder="请输入搜索内容">
<button type="submit" class="btn btn-primary mt-3">搜索</button>
<button type="button" class="btn btn-secondary mt-3 ml-3" id="clearBtn">清除</button>
</div>
</form>
</div>
</div>
</div>
```
CSS:
```css
.container {
margin-top: 50px;
}
#searchBox {
border-radius: 20px;
}
#clearBtn {
display: none;
}
```
JavaScript:
```javascript
// 防抖函数
function debounce(func, wait, immediate) {
let timeout;
return function() {
const context = this;
const args = arguments;
const later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
const callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
// 清空搜索框
function clearSearchBox() {
$("#searchBox").val("");
$("#clearBtn").hide();
}
$(document).ready(function() {
// 监听搜索框输入
$("#searchBox").on("input", function() {
if ($(this).val().length > 0) {
$("#clearBtn").show();
} else {
$("#clearBtn").hide();
}
});
// 监听清除按钮点击
$("#clearBtn").on("click", function() {
clearSearchBox();
});
// 监听表单提交
$("form").on("submit", function(e) {
e.preventDefault();
const keyword = $("#searchBox").val().trim();
if (keyword.length > 0) {
// 模拟发送请求
$("button").prop("disabled", true);
setTimeout(function() {
alert(`搜索关键词:${keyword}`);
$("button").prop("disabled", false);
}, 2000);
}
});
// 防抖处理
$("form").on("submit", debounce(function(e) {
e.preventDefault();
}, 500, true));
});
```
这个示例中,防抖函数的间隔时间为500毫秒,即当用户输入停止超过500毫秒后才会触发搜索请求。同时,当用户输入内容时,会显示清除按钮,点击清除按钮会清空搜索框;点击搜索按钮时,会模拟发送请求,并在请求返回后弹出提示框显示搜索关键词。在请求发送期间,搜索和清除按钮都会被禁用。