使用 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 占位符属性文本
IE 10, 11. 如何防止使用占位符的文本输入触发焦点输入事件?