单击或选项卡上的表单字段文本颜色更改答案

【问题标题】：Form field text color change on click or tab单击或选项卡上的表单字段文本颜色更改
【发布时间】：2014-02-11 12:19:56
【问题描述】：

我的网站上有一个联系表单，其中的文本以浅灰色开头，单击时我已对其进行了设置，因此它会改变颜色，但当我点击它时不会。是否可以检测用户是否使用选项卡按钮进入字段而不是单击并覆盖此实例。

HTML：

<input name="email" type="text" id="EmailField" class="extraFields" autocomplete="off">

jQuery:

 $('body').on('click', '.extraFields', function () {
     $(this).addClass('clickedField');
 });

CSS：

.extraFields{
     color:#cccccc;
}
.clickedField{
     color:#000000 !important;
}

【问题讨论】：

你可以尝试使用focus 代替click（或者以及），哈哈哈刚刚注意到你也用焦点标记了这个！
@davidkonrad 键盘上的 Tab 键
jsfiddle.net/eFw6J ??

标签： jquery css forms focus

【解决方案1】：

使用焦点事件而不是点击：

$('body').on('focus', '.extraFields', function () {
    $(this).addClass('clickedField');
});

【讨论】：

我会同时使用，点击和聚焦

【解决方案2】：

这里的问题是事件监听器附加到页面的body 元素上，所以$(this) 引用它。要在字段本身上设置类，请使用e.target：

// add class on focus
$('body').on('focus', '.extraFields', function (event) {
    $(event.target).addClass('clickedField');
});
// remove class on blur
$('body').on('blur', '.extraFields', function (event) {
    $(event.target).removeClass('clickedField');
});

见http://api.jquery.com/event.target/

【讨论】：