使用 JavaScript 更改焦点占位符文本的颜色 [关闭]答案

【问题标题】：Changing color of placeholder text on focus with JavaScript [closed]使用 JavaScript 更改焦点占位符文本的颜色 [关闭]
【发布时间】：2016-01-22 00:38:04
【问题描述】：

我正在尝试将占位符文本的颜色更改为白色焦点。您可以查看联系表格here.

我尝试了不同的 CSS 代码，但大多数代码在不同的浏览器上看起来并不相同 + 我已经进行了一些研究，现在我可以看到在设置占位符样式时存在一些限制CSS。

我的问题是，我可以使用 JavaScript 将占位符颜色更改为白色吗？我对编写 JavaScript 不是很熟悉，但希望得到任何帮助

【问题讨论】：

标签： javascript html css twitter-bootstrap-3 placeholder

【解决方案1】：

相信您需要供应商前缀（来自 css-tricks.com）：

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

使用 javascript，您只能以编程方式在焦点事件上应用类似的样式（使用供应商前缀）。

编辑：事实上，我认为这些样式不能使用 javascript 应用。您需要创建一个类并使用 js 应用它。

CSS：

input.placeholderred::-webkit-input-placeholder {
   color: red;
}

jQuery:

var $textInput = $('#TextField1');
$textInput.on('focusin',
    function () {
         $(this).addClass('placeholderred');
    }
);

$textInput.on('focusout',
    function () {
         $(this).removeClass('placeholderred');
    }
);

JS：

var textInput = document.getElementById('TextField1');
textInput.addEventListener('focus',
    function () {
         this.classList.add('placeholderred');
    }
);

textInput.addEventListener('blur',
    function () {
         this.classList.remove('placeholderred');
    }
);

感谢最有帮助的 Armfoot，小提琴：http://jsfiddle.net/qbkkabra/2/

【讨论】：

嘿，当你复制粘贴他们的代码时至少引用CSS-Tricks :P OP 专门要求将其更改为焦点，请注意详细说明你如何使用该类以便这样做?他也在使用 jQuery，如果你更熟悉的话……
抱歉，我并没有试图窃取它。我只是忘记了确切的前缀，所以复制了它。我将通过附加事件来更新答案。
添加了纯JS和jquery
这是你的code's fiddle :P
@Armfoot 你很有帮助。谢谢！包含在答案中。

【解决方案2】：

这仅适用于 css 和 html

CSS

input::-webkit-input-placeholder {
color: #999;
}
input:focus::-webkit-input-placeholder {
color: red;
}

/* Firefox < 19 */
input:-moz-placeholder {
color: #999;
}
input:focus:-moz-placeholder {
color: red;
}

/* Firefox > 19 */
input::-moz-placeholder {
color: #999;
}
input:focus::-moz-placeholder {
color: red;
}

/* Internet Explorer 10 */
input:-ms-input-placeholder {
color: #999;
}
input:focus:-ms-input-placeholder {
color: red;
}

和html

<input type='text' placeholder='Enter text' />

【讨论】：