텍스트 입력을 클릭하면 양식 필드가 포커스를 바꿉니다.

텍스트 입력을 클릭하면 양식 필드가 포커스를 바꿉니다.

아래에 검색 양식이 있는데 선택 입력 유형 2개와 키워드로 검색할 수 있는 텍스트 입력 필드 1개가 있습니다.어떤 이유에서인지 키워드 텍스트 상자를 클릭하면 바로 Category에 대한 첫 번째 선택 상자 드롭다운으로 포커스가 바뀌고 키워드 텍스트 상자에 아무것도 입력할 수 없습니다.왜 이런 일이 일어나는지 누가 알 수 있습니까?

$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"/>

제가 대신 라벨 태그를 탑 태그로 변경해서 문제를 해결한 것으로 보입니다.그것이 갈등을 극복한 것 같습니다.

키워드 텍스트 입력을 클릭한 후 포커스가 즉시 첫 번째 선택 상자로 다시 바뀌는 문제는 선택 입력을 둘러싼 요소로 인해 발생할 수 있습니다.기본적으로 입력 요소와 연결된 레이블을 클릭하면 포커스가 해당 입력 요소로 이동됩니다.

이 문제를 해결하기 위해 선택한 입력에 대한 레이블과 입력 요소를 구분하여 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>

언급URL : https://stackoverflow.com/questions/31215727/form-field-changes-focus-when-i-click-on-the-text-input