Skip to content

Instantly share code, notes, and snippets.

@amirsuhail786

amirsuhail786/Input placeholders for IE

Last active April 7, 2019 18:15
Download ZIP

Revisions

  1. Zunair Mushtaq revised this gist Jan 19, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Input placeholders for IE
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@
    <meta charset="utf-8">
    <title>Input placeholders for IE</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="html5placeholder.jquery.js"></script>
    <script src="placeholder.jquery.js"></script>
    <script>
    $(function(){
    $(':input[placeholder]').placeholder();
  2. Zunair Mushtaq renamed this gist Jan 19, 2016. 1 changed file with 0 additions and 0 deletions.
    0 html5placeholder.jquery.js → placeholder.jquery.js
    View file
    File renamed without changes.
  3. Zunair Mushtaq revised this gist Jan 19, 2016. No changes.
  4. Zunair Mushtaq created this gist Jan 19, 2016.
    52 changes: 52 additions & 0 deletions Input placeholders for IE
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Input placeholders for IE</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="html5placeholder.jquery.js"></script>
    <script>
    $(function(){
    $(':input[placeholder]').placeholder();
    });
    </script>
    <style>
    body {width:500px;margin:20px auto;}
    div {margin-bottom:10px;}
    </style>
    </head>
    <body>
    <form>
    <div>
    <label for="email">Email: </label>
    <input type="email" id="email" placeholder="username@thissite.com" />
    </div>
    <div>
    <label for="foo">Password: </label>
    <input type="password" id="pw" placeholder="It's like, your password" />
    </div>
    <div>
    <label>Text:
    <input type="text" name="text" maxlength="6" placeholder="Hi Mom"/>
    </label>
    </div>
    <div>
    <label>Search:
    <input type="search" name="text" placeholder="Search Things and Stuff" />
    </label>
    </div>
    <div>
    <label>Telephone:
    <input type="tel" name="text" placeholder="(XXX) XXX-XXXX"/>
    </label>
    </div>
    <div>
    <label>URL:
    <input type="url" id="url" name="earl" placeholder="https://miketaylr.com" />
    </label>
    </div>
    <input type="submit" />
    </form>

    </body>
    </html>
    89 changes: 89 additions & 0 deletions html5placeholder.jquery.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,89 @@
    // HTML5 placeholder plugin version 1.01
    // Copyright (c) 2010-The End of Time, Mike Taylor, http://miketaylr.com
    // MIT Licensed: http://www.opensource.org/licenses/mit-license.php
    //
    // Enables cross-browser HTML5 placeholder for inputs, by first testing
    // for a native implementation before building one.
    //
    //
    // USAGE:
    //$('input[placeholder]').placeholder();

    // <input type="text" placeholder="username">
    (function($){
    //feature detection
    var hasPlaceholder = 'placeholder' in document.createElement('input');

    //sniffy sniff sniff -- just to give extra left padding for the older
    //graphics for type=email and type=url
    //var isOldOpera = $.browser.opera && $.browser.version < 10.5;

    $.fn.placeholder = function(options) {
    //merge in passed in options, if any
    var options = $.extend({}, $.fn.placeholder.defaults, options),
    //cache the original 'left' value, for use by Opera later
    o_left = options.placeholderCSS.left;

    //first test for native placeholder support before continuing
    //feature detection inspired by ye olde jquery 1.4 hawtness, with paul irish
    return (hasPlaceholder) ? this : this.each(function() {

    //local vars
    var $this = $(this),
    inputVal = $.trim($this.val()),
    inputWidth = $this.width(),
    inputHeight = $this.height(),

    //grab the inputs id for the <label @for>, or make a new one from the Date
    inputId = (this.id) ? this.id : 'placeholder' + (+new Date()),
    placeholderText = $this.attr('placeholder'),
    placeholder = $('<label for='+ inputId +'>'+ placeholderText + '</label>');

    //stuff in some calculated values into the placeholderCSS object
    options.placeholderCSS['width'] = inputWidth;
    options.placeholderCSS['height'] = inputHeight;

    // adjust position of placeholder
    options.placeholderCSS.left = o_left;//(isOldOpera && (this.type == 'email' || this.type == 'url')) ?
    // '11%' : o_left;
    placeholder.css(options.placeholderCSS);

    //place the placeholder if the input is empty
    if (!inputVal){
    $this.wrap(options.inputWrapper);
    $this.attr('id', inputId).after(placeholder);
    };

    //hide placeholder on focus
    $this.focus(function(){
    if (!$.trim($this.val())){
    $this.next().hide();
    };
    });

    //show placeholder if the input is empty
    $this.blur(function(){
    if (!$.trim($this.val())){
    $this.next().show();
    };
    });
    });
    };

    //expose defaults
    $.fn.placeholder.defaults = {
    //you can pass in a custom wrapper
    inputWrapper: '<span style="position:relative"></span>',

    //more or less just emulating what webkit does here
    //tweak to your hearts content
    placeholderCSS: {
    'font':'0.75em sans-serif',
    'color':'#bababa',
    'position': 'absolute',
    'left':'5px',
    'top':'3px',
    'overflow-x': 'hidden'
    }
    };
    })(jQuery);