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

Posted

技术标签:

【中文标题】使用 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' />

【讨论】:

以上是关于使用 JavaScript 更改焦点占位符文本的颜色 [关闭]的主要内容,如果未能解决你的问题,请参考以下文章

在 Chrome 中清除焦点上的 HTML5 占位符属性文本

如何更改焦点上的占位符颜色?

在焦点 jquery 上将占位符输入类型文本更改为密码

IE 10, 11. 如何防止使用占位符的文本输入触发焦点输入事件?

如何根据它是不是是占位符来更改 textarea 文本的颜色?

html 在焦点上隐藏占位符文本