Issue
Here is a minimal HTML page to turn the placeholder text red if a value is missing
<html><head></head>
<body>
<input type="text", class="email", name="email", placeholder="initial placeholder text", size=48><br />
<button onClick="Validate()">
Validate
</button>
<script>
function Validate() {
var email = document.getElementsByClassName("email")[0];
if (email.value.trim() == '') {
email.placeholder = "Updated placeholder text";
email.style.color = "red"; // for Firefox
}
}
</script>
</body></html>
The placeholder text is updated on clicking the button if the field is left blank. In Firefox the font color goes red, in many other browsers nothing happens. I've tried using all of these
email.style = "color: red"; // invalid but works in Firefox
email.setAttribute('style', 'color:red;');
email.style.setProperty('color', 'red');
and all work in FF, not in others.
console.log(email.style.color);
shows the value has been set.
Setting the background color works in all browsers! Any suggestions?
Solution
Changing the placeholder's color you're supposed to use the ::placeholder selector in CSS. What is surprising here is that it actually works on FF.
Anyway, to solve your problem, I would recommand to use specific class to achieve this.
In your CSS:
input.invalid-value::placeholder{
color: red;
}
Then in your JS:
if (email.value.trim() == '' || !ValidateEmail(email.value)) {
email.classList.add('invalid-value');
}
Answered By - Jerem
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.