搜索框里需要加上限制内容,内容包含< > script click img $
时间: 2023-11-27 18:53:44 浏览: 9
在搜索框中加入限制内容可以通过前端的JavaScript对用户输入的内容进行过滤和检验。以下是一个简单的示例代码,可以过滤掉包含<、>、script、click、img和$等字符的输入。
```html
<input type="text" id="search-box" onkeyup="checkInput()">
<script>
function checkInput() {
var input = document.getElementById("search-box").value;
var filteredInput = input.replace(/[<>$]/g, '');
filteredInput = filteredInput.replace(/script|click|img/gi, '');
document.getElementById("search-box").value = filteredInput;
}
</script>
```
此代码将在用户输入时调用`checkInput()`函数,该函数使用正则表达式将输入中的<、>、$等字符和script、click、img字符串过滤掉,并将过滤后的结果设置为搜索框的值。这样就可以有效地防止用户输入恶意代码或其他非法字符。
相关问题
使用html写一个搜索页面,搜索内容按块展示,手机电脑自适应
好的,以下是一个搜索页面的示例代码,包含了按块展示搜索结果的功能,并且使用了响应式设计,可以适应不同大小的屏幕:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索页面</title>
<style>
/* 设置全局样式 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 设置搜索框样式 */
#search-box {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
background-color: #f5f5f5;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#search-input {
width: 80%;
max-width: 600px;
height: 40px;
padding: 10px;
border: none;
border-radius: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
font-size: 18px;
outline: none;
}
#search-button {
margin-left: 20px;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 20px;
font-size: 18px;
cursor: pointer;
}
/* 设置搜索结果样式 */
#search-results {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
padding: 20px;
}
.search-result {
width: 300px;
margin: 10px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 5px;
overflow: hidden;
}
.search-result img {
width: 100%;
height: 200px;
object-fit: cover;
}
.search-result h3 {
margin: 10px;
font-size: 20px;
font-weight: bold;
}
.search-result p {
margin: 10px;
font-size: 16px;
color: #666;
line-height: 1.5;
}
/* 响应式设计 */
@media (max-width: 768px) {
#search-input {
width: 60%;
}
.search-result {
width: 100%;
}
}
</style>
</head>
<body>
<!-- 搜索框 -->
<div id="search-box">
<input type="text" id="search-input" placeholder="请输入搜索内容">
<button id="search-button">搜索</button>
</div>
<!-- 搜索结果 -->
<div id="search-results">
<!-- 这里用 JavaScript 动态生成搜索结果 -->
</div>
<!-- 引入 jQuery 库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// 监听搜索按钮点击事件
$('#search-button').click(function() {
// 获取搜索内容
var keyword = $('#search-input').val();
// 向服务器发送搜索请求,并获取搜索结果
$.get('search.php', {keyword: keyword}, function(data) {
// 解析搜索结果,并动态生成搜索结果的 HTML 代码
var resultsHtml = '';
for (var i = 0; i < data.length; i++) {
resultsHtml += '<div class="search-result">';
resultsHtml += '<img src="' + data[i].imageUrl + '">';
resultsHtml += '<h3>' + data[i].title + '</h3>';
resultsHtml += '<p>' + data[i].description + '</p>';
resultsHtml += '</div>';
}
// 将搜索结果添加到页面上
$('#search-results').html(resultsHtml);
});
});
</script>
</body>
</html>
```
请注意,这里的搜索结果是通过 JavaScript 动态生成的,需要与服务器端的代码配合实现。另外,为了方便演示,这里使用了 jQuery 库,但实际开发中应该根据需要选择合适的工具和框架。
用html和js写一个搜索框可以自定义搜索引擎简约风扁平化
<!DOCTYPE html>
<html>
<head>
<title>自定义搜索引擎</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
#search-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
#search-box {
display: flex;
align-items: center;
padding: 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
margin-bottom: 20px;
width: calc(100% - 40px);
max-width: 500px;
}
#search-box input[type="text"] {
flex: 1;
border: none;
margin-left: 10px;
font-size: 16px;
width: 100%;
outline: none;
}
#search-box button {
padding: 5px 10px;
background-color: #007bff;
border: none;
color: #fff;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
margin-left: 10px;
transition: background-color 0.2s ease-in-out;
}
#search-box button:hover {
background-color: #0069d9;
}
#search-engines {
display: flex;
flex-direction: column;
align-items: center;
}
.engine-item {
display: flex;
align-items: center;
padding: 5px 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
margin-bottom: 10px;
max-width: 500px;
width: calc(100% - 40px);
cursor: pointer;
transition: background-color 0.2s ease-in-out;
text-align: center;
}
.engine-item:hover {
background-color: #f2f2f2;
}
.engine-item img {
width: 30px;
height: auto;
margin-right: 10px;
}
.engine-item p {
margin: 0;
flex: 1;
text-align: left;
}
</style>
</head>
<body>
<div id="search-wrapper">
<div id="search-box">
<select id="engine-select">
<option value="https://www.google.com/search?q={searchTerm}">Google</option>
<option value="https://www.baidu.com/s?wd={searchTerm}">百度</option>
<option value="https://cn.bing.com/search?q={searchTerm}">Bing</option>
</select>
<input type="text" id="search-input" placeholder="请输入搜索内容">
<button id="search-btn">搜索</button>
</div>
<div id="search-engines">
<div class="engine-item" data-value="https://www.google.com/search?q={searchTerm}">
<img src="https://www.google.com/favicon.ico" alt="Google">
<p>Google</p>
</div>
<div class="engine-item" data-value="https://www.baidu.com/s?wd={searchTerm}">
<img src="https://www.baidu.com/favicon.ico" alt="百度">
<p>百度</p>
</div>
<div class="engine-item" data-value="https://cn.bing.com/search?q={searchTerm}">
<img src="https://cn.bing.com/favicon.ico" alt="Bing">
<p>Bing</p>
</div>
</div>
</div>
<script type="text/javascript">
let searchInput = document.getElementById("search-input");
let searchBtn = document.getElementById("search-btn");
let engineSelect = document.getElementById("engine-select");
let engineItems = document.querySelectorAll(".engine-item");
let selectedEngine = engineSelect.value;
// 搜索按钮点击事件
searchBtn.addEventListener("click", function() {
let searchTerm = searchInput.value.trim();
if (searchTerm !== "") {
let searchUrl = selectedEngine.replace("{searchTerm}", searchTerm);
window.location.href = searchUrl;
}
});
// 搜索引擎选择器变化事件
engineSelect.addEventListener("change", function() {
selectedEngine = this.value;
});
// 搜索引擎列表项点击事件
engineItems.forEach(function(item) {
item.addEventListener("click", function() {
selectedEngine = this.getAttribute("data-value");
engineSelect.value = selectedEngine;
});
});
</script>
</body>
</html>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)