更改占位符颜色后提交表单

问题描述：

根据此：Change an HTML5 input's placeholder color with CSS 的代码改变的占位符的颜色是：更改占位符颜色后提交表单

::-webkit-input-placeholder { /* WebKit, Blink, Edge */ 
    color: #909; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color: #909; 
    opacity: 1; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color: #909; 
    opacity: 1; 
} 
:-ms-input-placeholder { /* Internet Explorer 10-11 */ 
    color: #909; 
}

此代码是非常好，工作正常。但是，我有一个小问题。我想改变占位符的颜色，当有人点击“提交”（唯一的问题是改变它在js上的功能......其他一切正常）。这是我试图用js：

$("#email").css('::-webkit-input-placeholder', 'red'); 
$("#email").css(':-moz-placeholder', 'red'); 
$("#email").css('::-moz-placeholder', 'red'); 
$("#email").css(':-ms-input-placeholder', 'red');

它不适用于我...我应该改变什么来解决它？我想这是小事，但我无法修复它...任何建议？

更好地使一类具有以上所有的CSS，并通过使用addClass点击提交**在页面提交** –

当加入JS该类代码只是表示成功或不在同一页面中的消息。不断变化的颜色如果出现错误 –

@Jonasw我（MyClass的） –

答

除了使用JS更改CSS之外，还可以在表单上添加一个类&将属性继承到其中。当某人提交表单时，您的表单标签上会显示addClass或toggleClass。

JS：

$('.form-btn').on('click', function(e) { 
    e.preventDefault(); 
    $(this).parent().closest('form').toggleClass('submit-form'); 
});

CSS（继承与.submit-form类）：

form.submit-form ::-webkit-input-placeholder { 
    /* WebKit, Blink, Edge */ 
    color: red; 
} 

form.submit-form :-moz-placeholder { 
    /* Mozilla Firefox 4 to 18 */ 
    color: red; 
    opacity: 1; 
} 

form.submit-form ::-moz-placeholder { 
    /* Mozilla Firefox 19+ */ 
    color: red; 
    opacity: 1; 
} 

form.submit-form :-ms-input-placeholder { 
    /* Internet Explorer 10-11 */ 
    color: red; 
}

看一看下面的代码片段：

$('.form-btn').on('click', function(e) { 
 
    e.preventDefault(); 
 
    $(this).parent().closest('form').toggleClass('submit-form'); 
 
});

input[type="email"] { 
 
    display: block; 
 
    font-size: 20px; 
 
    margin-bottom: 10px; 
 
} 
 

 
::-webkit-input-placeholder { 
 
    /* WebKit, Blink, Edge */ 
 
    color: #909; 
 
} 
 

 
:-moz-placeholder { 
 
    /* Mozilla Firefox 4 to 18 */ 
 
    color: #909; 
 
    opacity: 1; 
 
} 
 

 
::-moz-placeholder { 
 
    /* Mozilla Firefox 19+ */ 
 
    color: #909; 
 
    opacity: 1; 
 
} 
 

 
:-ms-input-placeholder { 
 
    /* Internet Explorer 10-11 */ 
 
    color: #909; 
 
} 
 

 
form.submit-form ::-webkit-input-placeholder { 
 
    /* WebKit, Blink, Edge */ 
 
    color: red; 
 
} 
 
form.submit-form :-moz-placeholder { 
 
    /* Mozilla Firefox 4 to 18 */ 
 
    color: red; 
 
    opacity: 1; 
 
} 
 
form.submit-form ::-moz-placeholder { 
 
    /* Mozilla Firefox 19+ */ 
 
    color: red; 
 
    opacity: 1; 
 
} 
 
form.submit-form :-ms-input-placeholder { 
 
    /* Internet Explorer 10-11 */ 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="" action=""> 
 
    <input type="email" placeholder="Enter Email" /> 
 
    <button class="form-btn">Submit (change placeholder color)</button> 
 
</form>

希望这有助于！

答

希望这个作品！

$("#email").addClass('success');

.success::-webkit-input-placeholder { 
 
    color: orange; 
 
} 
 
.success::-moz-placeholder{ 
 
    color: orange; 
 
} 
 
.success:-ms-input-placeholder{ 
 
    color: orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input type="email" id="email" placeholder="email" />

更改占位符颜色后提交表单

相关推荐