i




 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
cross browser solution for placeholder (new attribute of input type in html5)
08-15-2011, 06:37 PM
Post: #1
cross browser solution for placeholder (new attribute of input type in html5)
Placeholder attribute displays text in an input field that
suggests to the user the kind of input he must enter. The text displays when the control does not have focus and has no user-supplied input. When the control has focus, the placeholder text disappears. As html5 is in development so not all browsers have implemented the placeholder attribute so to solve this cross-browser problem we will use jquery and modernizr(to detect if placeholder is supported).


Code:
&lt;script type="text/javascript" src="../modernizr-1.7.js"></script>
&lt;script type="text/javascript" src="../jquery-1.5.1.js"></script>
<script type="text/javascript" src="../placeholder.js"&gt;&lt;/script>
<script type="text/javascript"&gt;
    $(document).ready(function () {
        if (!Modernizr.input.placeholder) {
            makePlaceholders();
        }
    });
&lt;/script>
</head>
<body>
<h1>Using the placeholder Attribute</h1>
<form method="get" action="">
<p><label for="Text1">Field 1: </label><input name="Text1" type="text" id="Text1" placeholder="Placeholder Text 1"/></p>
<p><label for="Text2">Field 2: </label><input name="Text2" type="email" id="Text2" placeholder="Placeholder Text 2"/></p>
<p><label for="Text3">Field 3: </label><input name="Text3" type="url" id="Text3" placeholder="Placeholder Text 3"/></p>
</form>
</body&gt;
</html&gt;




the code for placeholder.js

Code:
function()
{
    $input = $("input[type=text]");
    $input.each(
        function()
        {
            var $this = jQuery(this);
            this.placeholderVal = $this.attr("placeholder");
            $this.val(this.placeholderVal);
        }
    )
    .bind("focus", function(){
        var $this = jQuery(this);
        var val = $.trim($this.val());
        if(val == this.placeholderVal || val == "")
        {    $this.val("");        }
        
    })
    
        .bind("blur", function(){
        var $this = jQuery(this);
        var val = $.trim($this.val());
        if(val == this.placeholderVal || val == "")
        {    $this.val(this.placeholderVal);        }
        
    })
}



Quote
11-23-2014, 05:33 PM
Post: #2
RE: cross browser solution for placeholder (new attribute of input type in html5)
As you said for browsers which do not support it natively, you have to use plugin. I can recommend you one which is written in jquery like here: cross-browser support for placeholder attribute in HTML5. It detects when browser doesn't support placeholder, and do its job instead of the browsers.
Quote


Possibly Related Threads...
Thread: Author Replies Views: Last Post
  New html 5 input types with example haider.ali 0 2,301 08-15-2011 06:06 PM
Last Post: haider.ali
  Additional Input Types in HTML5 nisar87 0 2,510 07-08-2011 05:06 PM
Last Post: nisar87



User(s) browsing this thread: 1 Guest(s)