Question

我有一个登录页面，其中有3个输入元素。在onblur上，如果此元素为空，我想更改占位符值。此更改的占位符值应采用不同的颜色（例如：红色）。怎么做到这一点？

Answer 1

<input type="text" placeholder="Provide User Name" value="Provide User Name" id="UName" class="applyOnBlur  apply" />
<input type="text" placeholder="Provide Password" value="Provide Password" id="Pwd" class="applyOnBlur apply" />
<input type="text" placeholder="Provide Otp" value="Provide Otp" id="OTP" class="applyOnBlur apply  " />
<script>

    $('input.applyOnBlur').blur(function () {
        $('input.applyOnBlur').each(function (index) {
            if ($(this).val().trim() == "" || $(this).val().trim() == $(this).attr('placeholder')) {
                $(this).val($(this).attr('placeholder'));
                $(this).addClass('apply');

            }
            else {
                $(this).removeClass('apply');

            }
        });
    });
    $('input.applyOnBlur').focus(function () {
        if ($(this).val().trim() == $(this).attr('placeholder')) {
            $(this).val('');
        }
    });

</script>
<style>
    .apply
    {
        color: Red;
    }
</style>

Answer 2

（迟到的答案，但它对其他人来说仍然有用......）

您好，

这是我改变占位符颜色的方法。

这是我的CSS代码：

.input-placeholder-false::-webkit-input-placeholder {
     color: #ff534f;
}

此代码表示：对于类＆＃34; input-placeholder-false＆＃34;，更改占位符的颜色。

然后，你必须这样做：

::-webkit-input-placeholder /* Chrome - Opera - Safari */
::-moz-placeholder /* Firefox 19+ */
:-ms-input-placeholder /* IE 10 */
:-moz-placeholder /* Firefox 18- */

下一步，JavaScript：

document.getElementById('your-input').className = 'input-placeholder-false';

它通常适用于所有浏览器！

Answer 3

一般情况下，您可以使用以下JavaScript修改每个元素：

＆＃13;

    if (document.getElementById("elementname")) {
    document.getElementById("elementname").style.backgroundColor = "#FF0000"
}

＆＃13;

＆＃34;的ElementName＆＃34;是html元素的ID属性的值。你也可以使用getElementByName（但我没有使用它，也没有例子）

如何在onblur事件发生时用javascript更改占位符颜色？

3 个答案: