我试图创建一个谷歌重定向页面上你输入。就像你在搜索栏上输入“xyz”一样，它会在谷歌上搜索“xyz”。但它并没有这样做。相反，它在网络上搜索“xyz”。这是一个学校的项目，我没有太多的知识html和css，所以请原谅我....
HTML代码：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>e</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="search-bar">
<form class="search">
<input type="text" id="input" name="input" placeholder="Type here..."><br>
<button>
<button onclick = redirect() class="fas fa-search"></button>
</button>
</form>
</div>
<script>
function redirect() {
let input = document.querySelector('#input').value;
location.replace("https://www.google.com/search?q=" + input) }
</script>
</body>
</html>CSS代码：
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
button {
cursor: pointer;
transition: 1s ease;
font-family: inherit;
}
html {
color-scheme: dark;
}
body {
background-color: #202124;
font-family: "Poppins", sans-serif;
}
.search-bar {
max-width: 400px;
width: 100%;
position: absolute;
margin-top: 180px;
margin-left: 250px;
}
form.search {
display: flex;
width: min(90%, 25rem);
border: 2px solid grey;
border-radius: 25px;
background-color: #202124;
overflow: hidden;
}
form.search > * {
padding: 0.8em 1em;
border: none;
background-color: transparent;
font-size: 1.2rem;
}
form.search > :is(:focus, :focus-visible, :active){
outline: none;
}
form.search input {
min-width: 0;
flex: 1;
}
form.search button i {
transition: inherit;
}
form.search button:hover i {
scale: 1.2;
}解决方案，使其工作？
1条答案
按热度按时间wyyhbhjk1#
<button>的默认type是"submit"，单击提交按钮将提交其表单。这本质上是模糊了JavaScript代码，因为表单提交是重新加载页面。您可以更改按钮的类型：
其他选项包括完全删除
<form>，因为没有什么东西真正使用它（除了样式，这可以用<div>轻松完成）。或者保持标记原样，但处理（和canceling）表单的submit事件，而不是按钮的click事件。