当我点击文本输入框时，表单字段会改变焦点。

Question

我下面有一个搜索表单，其中有两个选择框和一个文本输入框，用户可以通过关键字进行搜索。但是，无论什么原因，每当我点击关键字文本框时，焦点立即回到了第一个选择框下拉框中的类别，因此我无法在关键字文本框中输入任何内容。有人能看出这是为什么吗？

$categories_list = array();
$ratings_list = array();

try {
$query = $dbh->query("SELECT category, genre, rating FROM posts WHERE 1
GROUP BY category, genre, rating");
$query->setFetchMode(PDO::FETCH_ASSOC);
$iterator = new IteratorIterator($query);
foreach ($iterator as $row) {
    if (empty($row['category']) == false && !in_array($row['category'],
$categories_list))
        $categories_list[] = $row['category'];
    if (empty($row['rating']) == false && !in_array($row['rating'],
$ratings_list))
        $ratings_list[] = $row['rating'];
}
} catch (Exception $e) {
echo '<p>', $e->getMessage(), '</p>';
}
?>


<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>Search Completed Stories</h2>
<form name="search" method="get" 
action="http://example.com/searchB/">
<label>
    Category:
    <select name="category">
        <?php foreach($categories_list as $category) : ?>
            <option><?php echo $category; ?></option>
        <?php endforeach; ?>
    </select>
</label>
<label>
    Rating:
    <select name="rating">
            <option value="">Any</option>
        <?php foreach($ratings_list as $rating) : ?>
            <option><?php echo $rating; ?></option>
        <?php endforeach; ?>
    </select>
</label>
<label>
    Keywords:
    <input type="text" name="keywords">
</label>
<input type="hidden" name="active" value="0">
<input type="submit"/>

- JA4677

---

改变焦点通常是由某种类型的Javascript引起的，但我在你的代码中没有看到任何JS。据我所知，PHP无法在页面加载后重置焦点。 - icecub

我想那可能就是了。你说得对，我在页面上没有使用任何JS。 - JA4677

奇怪的是，在开发页面上它运行良好。但是当我将这段代码放到另一个具有另一组结果列表的页面上时，关键字输入文本框就会出现焦点问题。 - JA4677

你的代码中没有任何会导致焦点改变的内容。因此，一定是其他原因导致了这种情况。你可以尝试提供更多的代码，或者如果没有其他选择，提供一个脚本运行的链接。如果我能看到它发生的情况，可能会更清楚一些。 - icecub

看起来我是通过把<label>标签改成<p>标签来解决问题的。我猜那样绕过了冲突。 - JA4677

Answer 1

看起来我通过将标签从label更改为p标签来解决了问题。我猜这样就避免了冲突。

- JA4677

Answer 2

你遇到的问题是在点击关键词文本输入框后焦点立即返回到第一个选择框的原因很可能是围绕选择框的元素。默认情况下，当你点击与输入元素相关联的标签时，焦点会转移到该输入元素。

为了解决这个问题，你可以通过修改HTML结构来分离选择框的标签和输入元素。以下是你代码的更新版本：

<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>Search Completed Stories</h2>
<form name="search" method="get" action="http://example.com/searchB/">
<label for="category">Category:</label>
<select name="category" id="category">
    <?php foreach($categories_list as $category) : ?>
        <option><?php echo $category; ?></option>
    <?php endforeach; ?>
</select>

<label for="rating">Rating:</label>
<select name="rating" id="rating">
    <option value="">Any</option>
    <?php foreach($ratings_list as $rating) : ?>
        <option><?php echo $rating; ?></option>
    <?php endforeach; ?>
</select>

<label for="keywords">Keywords:</label>
<input type="text" name="keywords" id="keywords">

<input type="hidden" name="active" value="0">
<input type="submit">
 </form>

- Sadekur Rahman

---

这是ChatGPT的输出，它在Stack Overflow上被禁止。 - tchrist