使用JavaScript更改焦点上占位符文本的颜色

前端之家收集整理的这篇文章主要介绍了使用JavaScript更改焦点上占位符文本的颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试将焦点上的占位符文本颜色更改为白色.您可以查看联系表格 here.

我尝试过不同的CSS代码,但是大多数代码在不同的浏览器上看起来都不一样,我已经做了一些研究,现在我可以看到在使用CSS设置占位符样式时存在一些限制.

我的问题是,我可以使用JavaScript将占位符颜色更改为焦点白色吗?我对编写JavaScript并不是那么熟悉,但我会感激任何帮助

解决方法

相信您需要供应商前缀(来自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/

猜你在找的JavaScript相关文章