搜索栏提交搜索后Input Value属性不显示搜索词问题求助

问题根源 #

当前搜索输入框的value属性被固定写为""，页面加载时不会自动读取URL中q参数的搜索关键词并填充，导致搜索结果页的输入框仅显示占位符，而非用户输入的搜索词。

修复方案 #

1. 后端动态渲染（推荐，更安全可靠）

如果页面由后端语言（如PHP、Node.js、Python等）生成，直接在后端将URL中q参数的值赋值给输入框的value属性，同时注意转义特殊字符防止XSS攻击：

• PHP 示例：

<form role="search" method="get" id="searchform" class="searchform" action="/search/"> 
  <input type="text" name="q" id="q" value="<?php echo isset($_GET['q']) ? htmlspecialchars($_GET['q']) : ''; ?>" placeholder="Search Your Keyword...">
  <input type="submit" id="searchsubmit" value="Search">
</form>

• Node.js（EJS模板）示例：

<form role="search" method="get" id="searchform" class="searchform" action="/search/"> 
  <input type="text" name="q" id="q" value="<%= req.query.q ? encodeURIComponent(req.query.q) : '' %>" placeholder="Search Your Keyword...">
  <input type="submit" id="searchsubmit" value="Search">
</form>

• Python Django 示例：

<form role="search" method="get" id="searchform" class="searchform" action="/search/"> 
  <input type="text" name="q" id="q" value="{{ request.GET.q|default:''|escape }}" placeholder="Search Your Keyword...">
  <input type="submit" id="searchsubmit" value="Search">
</form>

2. 纯静态HTML页面（前端JS处理）

如果是静态页面，用JavaScript读取URL查询参数并填充输入框：

<form role="search" method="get" id="searchform" class="searchform" action="/search/"> 
  <input type="text" name="q" id="q" value="" placeholder="Search Your Keyword...">
  <input type="submit" id="searchsubmit" value="Search">
</form>

<script>
const searchParams = new URLSearchParams(window.location.search);
const query = searchParams.get('q');
if (query) {
  document.getElementById('q').value = query;
}
</script>

内容的提问来源于stack exchange，提问作者Aman Singh