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

Question

我正在尝试将占位符文本的颜色更改为聚焦时的白色。您可以查看联系表here.

我尝试了不同的 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 应用。您需要创建一个 class 并使用 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/

Answer 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 更改焦点上占位符文本的颜色

Changing color of placeholder text on focus with JavaScript

html

javascript

css

placeholder

twitter-bootstrap-3