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

Question

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

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

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

Answer 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/