SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,093
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post anybody how to fix this in cross browser

    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. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    http://stackoverflow.com/questions/6...n-mind#6561242

    No point is repeating the answer. Another site has it.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by logic_earth View Post
    No point is repeating the answer.
    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:

    Code:
    <!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>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,093
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you for this ralph, Okay i will try this one.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •