删除重复form标签后搜索输入框无法正常工作是什么原因

问题根因 #

• 你代码中两个完全相同的<form>表单都使用了searchform类名，且内部输入框都用了重复的id search-input，HTML规范中id为全局唯一值，重复id会导致DOM选择逻辑异常。
• 控制搜索框显示的JavaScript代码，大概率是通过类名索引取的第二个表单元素做显示控制，或者事件绑定在了第二个表单的输入框上。你删除其中一个表单后，如果刚好删掉的是JS实际操作的那个，自然会出现搜索框不显示、输入无响应的问题。
• 重复的<style>块没有实际作用，保留一份即可。

修复方案 #

1. 清理重复代码，仅保留一份表单和样式，参考代码如下：

<form role="search" method="get" class="searchform group"  style="display: none; width:101%!important" action="<?php echo home_url( '/' ); ?>" >
    <input type="search" placeholder="<?php echo esc_attr_x( 'Search', 'placeholder' ) ?>"
           value="<?php echo get_search_query() ?>" name="s"
           id="search-input"
           title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</form>
<style>
    .search {display: inline-block} /* prevent 100% width */
    .search .fa-search {left: auto; right: 10px;}
</style>

2. 调整控制搜索框显隐的JavaScript逻辑：将原来通过索引选取第二个表单的逻辑，改为直接选取唯一的.searchform元素即可。比如原有代码如果是document.querySelectorAll('.searchform')[1]，直接改为document.querySelector('.searchform')。同时确认所有输入监听、提交事件都绑定在当前保留的表单/输入框上，即可恢复正常功能。

内容的提问来源于stack exchange，提问作者Mary Jquery