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

Posted 2023-03-05

【中文标题】使用 JavaScript 更改焦点占位符文本的颜色 [关闭]

【英文标题】：Changing color of placeholder text on focus with JavaScript [closed]

【发布时间】：2016-01-22 00:38:04

【问题描述】：

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

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

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

【参考方案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' />