Anybody how to fix this in cross browser

HTML & CSS
1

Hi, can you help me please how can i get work with the placeholder in I.E 9, it only works on chrome and firefox,but in I.E 9 it does not.

Thank you in advance.

2

http://stackoverflow.com/questions/6561235/how-to-use-html5-placeholder-attribute-with-backward-compatibility-in-mind#6561242

No point is repeating the answer. Another site has it. :eek:

3

True, although that thread doesn’t really show how to do the whole thing (apart from suggesting jQuery [spits and wipes his mouth]).

With my meager understanding of JS, I had a bit of fun with this issue recently, and came up with this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Placeholder fallback for IE</title>

<style>
body {background: #e7e7e7; font-family: Calibri,Helvetica,Arial,sans-serif; color: #222;}
h1 {font-size: 1.5em;}
fieldset {border: 0; padding: 0; margin: 0;}
legend {position: absolute; left:-9999px}
input:not([type="submit"]), textarea {width: 400px; display: block; margin: 10px 0; padding: 4px;}
.hide {position: absolute; left: -9999px;}
textarea {overflow:auto;}
</style>

</head>
<body>

<h1>Placeholder for Newer and Older Browsers</h1>

<form method="post" action="">
	<fieldset> 
		<legend>Contact Us</legend>
		<div>
			<label for="name">Name</label>
			<input name="name" type="text" id="name" placeholder="Your name">
		</div>
		<div>
			<label for="email">Email Address</label>
			<input name="email" type="email" id="email" placeholder="Your email address">
		</div>	
		<div>
			<label for="comm">Comments</label>
			<textarea name="comments" id="comm" placeholder="Type your comments here" rows="10" cols="50"></textarea>
		</div>
				
		<div>
			<input type="submit" name="submit" value="Send">
		</div>
	</fieldset>
</form>

<script>
function setForms() {
	for (var i=0, ii=document.forms.length; i<ii; i++) {
		var thisform = document.forms[i];
		var l = document.getElementsByTagName('label');
		for (var j=0, jj=l.length; j<jj; j++) {
			l[j].className = "hide";
		}
		for (var j=0, jj=thisform.elements.length; j<jj; j++) {
			var element = thisform.elements[j];
			if (element.type == "submit") continue;
			element.text = element.getAttribute("placeholder");
			var test = document.createElement("input");
			if ("placeholder" in test) {
				return true;
			} else {
				element.value = element.text;
				element.onfocus = function() {
					if (this.value == this.text) {
						this.value = "";
					}
				}
				element.onblur = function() {
					if (this.value == "") {
						this.value = this.text;
					}
				}
			}
		}
	}
}

setForms();

</script>
</body>
</html>
4

Thank you for this ralph, Okay i will try this one. :slight_smile: