Placeholder Not Working In Ie10

html:

&l

Solution 1:

It sounds like your javascript is breaking the native IE10 placeholder functionality.

To test this, and hopefully fix it, wrap the javascript you have written for placeholders in a conditional statement, so that it only applies to IE9 and below.

<!--[if lt IE 9]>
<script>
  document.createElement('header');
  document.createElement('nav');
</script>
<![endif]-->

Alternatively, there is a very nice jquery plugin by Mathias Bynens that is available for free and handles all of this for you: https://github.com/mathiasbynens/jquery-placeholder

Some CMSs already have a plugin built using this code. The Wordpress plugin is here: http://wordpress.org/plugins/html5-placeholder-polyfill/

Solution 2:

i am not sure about placeHolder attribute for input support in ie10,but if u want a placeholder in ie u can do this throug jquery like this below..

if(navigator.appVersion.match(/MSIE [\d.]+/)){
    var placeholderText = 'Some Placeholder Text';
    $('#loginname').val(placeholderText);
    $('#loginname').blur(function(){
        $(this).val() == '' ? $(this).val(placeholderText) : false;
    });
    $('#loginname').focus(function(){
        $(this).val() == placeholderText ? $(this).val('') : false;
    });
}

u can do same for password too..

Have U tried somewhat like this using code...i believe should work...

$('#loginname').attr('placeholder', 'username');
$('#password').attr('placeholder', 'password');

Solution 3:

Try this, is jquery pluin for placeholder in browser that don't support perfectly it. Leaving your php code and adding this js it should work:

(function($) {

/**
 * Spoofs placeholders in browsers that don't support them (eg Firefox 3)
 * 
 * Copyright 2011 Dan Bentley
 * Licensed under the Apache License 2.0
 *
 * Author: Dan Bentley [github.com/danbentley]
 */// Return if native support is available.if ("placeholder"indocument.createElement("input")) return;

$(document).ready(function(){
    $(':input[placeholder]').not(':password').each(function() {
        setupPlaceholder($(this));
    });

    $(':password[placeholder]').each(function() {
        setupPasswords($(this));
    });

    $('form').submit(function(e) {
        clearPlaceholdersBeforeSubmit($(this));
    });
});

functionsetupPlaceholder(input) {

    var placeholderText = input.attr('placeholder');

    setPlaceholderOrFlagChanged(input, placeholderText);
    input.focus(function(e) {
        if (input.data('changed') === true) return;
        if (input.val() === placeholderText) input.val('');
    }).blur(function(e) {
        if (input.val() === '') input.val(placeholderText); 
    }).change(function(e) {
        input.data('changed', input.val() !== '');
    });
}

functionsetPlaceholderOrFlagChanged(input, text) {
    (input.val() === '') ? input.val(text) : input.data('changed', true);
}

functionsetupPasswords(input) {
    var passwordPlaceholder = createPasswordPlaceholder(input);
    input.after(passwordPlaceholder);

    (input.val() === '') ? input.hide() : passwordPlaceholder.hide();

    $(input).blur(function(e) {
        if (input.val() !== '') return;
        input.hide();
        passwordPlaceholder.show();
    });

    $(passwordPlaceholder).focus(function(e) {
        input.show().focus();
        passwordPlaceholder.hide();
    });
}

functioncreatePasswordPlaceholder(input) {
    return $('<input>').attr({
        placeholder: input.attr('placeholder'),
        value: input.attr('placeholder'),
        id: input.attr('id'),
        readonly: true
    }).addClass(input.attr('class'));
}

functionclearPlaceholdersBeforeSubmit(form) {
    form.find(':input[placeholder]').each(function() {
        if ($(this).data('changed') === true) return;
        if ($(this).val() === $(this).attr('placeholder')) $(this).val('');
    });
}
})(jQuery);

Then you have to invoke the plugin in your php page or in another js simply by:

 $(function() {
    // Invoke the plugin
    $('input, textarea').placeholder();       
   });

Hope this helps!

Share