点击FontAwesome搜索图标无响应问题修复方案咨询

我用的网站模板里有个带图标的搜索表单，输入内容按Enter能正常提交，但点击通过FontAwesome用CSS content: '\f002' 生成的搜索图标时，完全没反应。相关代码如下：

#search form { text-decoration: none; position: relative; } 
#search form:before { 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-font-smoothing: antialiased; 
    font-family: FontAwesome; 
    font-style: normal; 
    font-weight: normal; 
    text-transform: none !important; 
} 
#search form:before { 
    -moz-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    -ms-transform: scaleX(-1); 
    transform: scaleX(-1); 
    color: #7f888f; 
    content: '\f002'; 
    cursor: default; 
    display: block; 
    font-size: 1.5em; 
    height: 2em; 
    line-height: 2em; 
    opacity: 0.325; 
    position: absolute; 
    right: 0; 
    text-align: center; 
    top: 0; 
    width: 2em; 
} 
input[type="text"] { height: 2.75em; } 
input[type="text"] { 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    -ms-appearance: none; 
    appearance: none; 
    background: #ffffff; 
    border-radius: 0.375em; 
    border: none; 
    border: solid 1px rgba(210, 215, 217, 0.75); 
    color: inherit; 
    display: block; 
    outline: 0; 
    padding: 0 1em; 
    text-decoration: none; 
    width: 100%; 
} 
body, input, select, textarea { 
    color: #7f888f; 
    font-family: "Open Sans", sans-serif; 
    font-size: 13pt; 
    font-weight: 400; 
    line-height: 1.65; 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/3.1.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="search" class="alt">
<form action="javascript:alert('Inner Function performed!');">
<input type="text" name="search_query" value="defaultValue"/>
</form>
</div>

请问该怎么修复这个问题？

问题核心在于CSS伪元素（:before）不是真实的DOM节点，没法直接绑定点击事件，而且你当前给伪元素设置的cursor: default也会让用户误以为这个区域不可交互。这里给你两种实用的修复思路：

方案一：利用事件冒泡，给表单绑定点击事件 #

伪元素属于它的宿主元素（这里是<form>），点击伪元素会触发宿主元素的点击事件。我们可以给表单添加点击逻辑，同时排除点击输入框的情况，只在点击图标区域时提交表单：

1. 先修改伪元素的光标样式，让用户感知到可点击：

#search form:before {
    /* 保留原有样式，仅修改这一行 */
    cursor: pointer;
}

2. 添加JavaScript处理点击事件：

document.querySelector('#search form').addEventListener('click', function(e) {
    // 只有点击的不是输入框时，才提交表单
    if (e.target.tagName !== 'INPUT') {
        this.submit();
    }
});

方案二：替换伪元素为真实DOM元素（更易维护） #

把CSS生成的伪元素换成实际的FontAwesome图标标签，这样可以直接给图标绑定点击事件，逻辑更直观：

1. 修改HTML结构，添加图标元素：

<div id="search" class="alt">
<form action="javascript:alert('Inner Function performed!');">
<input type="text" name="search_query" value="defaultValue"/>
<!-- 添加FontAwesome图标标签 -->
<i class="icon-search"></i>
</form>
</div>

2. 调整CSS样式，移除原伪元素代码，给新图标设置样式：

#search form { 
    text-decoration: none; 
    position: relative; 
} 
/* 删除原来的#search form:before相关样式，替换为以下代码 */
#search form i.icon-search {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
    color: #7f888f;
    cursor: pointer;
    display: block;
    font-size: 1.5em;
    height: 2em;
    line-height: 2em;
    opacity: 0.325;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 2em;
}
/* 其余原有样式保持不变 */

3. 给图标绑定点击提交事件：

document.querySelector('#search form i.icon-search').addEventListener('click', function() {
    this.closest('form').submit();
});

两种方案都能解决问题：方案一不用改动原有HTML结构，适合快速修复；方案二更直观，后续修改样式或逻辑也更方便。

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