<分区>
我正在尝试将占位符文本的颜色更改为聚焦时的白色。您可以查看联系方式here.
我尝试过不同的 CSS 代码,但大多数代码在不同的浏览器上看起来并不相同 + 我做了一些研究,现在我可以看到在使用以下样式设置占位符样式时存在一些限制CSS。
我的问题是,我可以使用 JavaScript 将占位符颜色更改为白色吗?我不太熟悉编写 JavaScript,但希望得到任何帮助
<分区>
我正在尝试将占位符文本的颜色更改为聚焦时的白色。您可以查看联系方式here.
我尝试过不同的 CSS 代码,但大多数代码在不同的浏览器上看起来并不相同 + 我做了一些研究,现在我可以看到在使用以下样式设置占位符样式时存在一些限制CSS。
我的问题是,我可以使用 JavaScript 将占位符颜色更改为白色吗?我不太熟悉编写 JavaScript,但希望得到任何帮助
最佳答案
相信您需要 vendor 前缀(来自 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,您只会在焦点事件上以编程方式应用类似的样式(使用 vendor 前缀)。
编辑:事实上,我认为这些样式不能使用 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, fiddle :http://jsfiddle.net/qbkkabra/2/
关于javascript - 使用 JavaScript 更改焦点上占位符文本的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33286015/