我希望制作一个简单的搜索框,该搜索框可以链接到我网站上的特定目的地,并添加“?id=...”,其中 ... 将是他们在搜索框中输入的任何内容。例如,如果他们在搜索框中输入 7654143,它会将他们链接到 .../player?id=7654143
我相信我知道如何做它的 html 部分,但是当涉及到 javascript 时我迷路了,我认为我需要它才能工作......
除此之外,如果他们输入的内容不符合要求(数字必须以 7654 开头且长度必须恰好为 15 个字符),搜索框的背景颜色将闪烁红色 1 秒,并带有过渡
<!DOCTYPE html>
<html>
<head>
<title>Stats page</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500" rel="stylesheet">
</head>
<body class=body>
<div class="header">
<a href=#>Leaderboards</a>
<a href=#>Server stats</a>
<a href=# class=active>Search</a>
</div>
<h1 class=title>Roleplay<span>Stats</span></h1>
<div class=search>
<input type="text" placeholder="Who are you looking for?">
</div>
</body>
</html>
最佳答案
我将重点关注这个问题的后端部分,其他人可能会参与验证过程。对于表单中的“id=”部分,我个人会使用 PHP。确保您的输入是在一个表单中,并使用 GET 方法来确保该值进入 URL。 (假设你的目标页面是 player.php,如果你走这条路,它需要是 .php)
在表单页面上(输入中的名称是将放入 url 中的名称:player.php?name-of-input=...):
<form method="get" action="player.php">
<input type="text" name="id" placeholder="Who are you looking for?">
</form>
在“播放器”页面上,您必须隔离 url 中的值,然后获取与该值对应的适当播放器,这正是 PHP 派上用场的地方。
在播放器页面上,代码中应该放在顶部的 php 部分:
<?php
$player = $_GET['id'];
//The "id" inside the brackets is actually the name of the input in your form
?>
使用此代码,用户将输入 id,该 id 将转到 url。然后,播放器页面,假设它是 player.php,将有一个看起来像 player.php?id=7654 的 url ... php 代码将获取 id,然后您可以执行输出适当的代码播放器。
关于javascript - 如何将搜索框链接到我页面上的网站?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47562369/