javascript - smartadmin - Placeholder no funciona en IE10

template smartadmin

Question

html:

<div class="div-input">
    <input type="text" id="loginname" name="username" value="" maxlength="25" 
        class="form-input" placeholder="Username"
    />
</div>
<div class="div-input">
    <input type="password" id="loginpassword" name="password" maxlength="25" 
        class="form-input" placeholder="Password"
    />
</div>
<div>
    <input type="submit" name="login" value="LOGIN" class="form-button" 
        onclick="return check_login(&quot;/&quot;)" 
    />
    <span id="logInfo"></span><span style="display: none;" id="overlay"></span>
    <span style="display: none;" id="popup">
        <img src="/public/images/loading.gif" />
    </span>
</div>

Mi problema es que el marcador de posición funciona bien en todos los navegadores, para IE8 e IE9 usé Javascript para resolverlo, pero en IE10 el marcador de posición funciona, pero no de manera correcta.

1. Lo que ocurre es que al cargar la página, si Placeholder es el marcador de posición, obtengo Placeholde como marcador de posición en IE10 (la última letra desaparece), pero si hago clic en el cuadro de entrada y fuera de la página, se muestra el marcador de posición correcto como Placeholder posición.

2. Si escribo una palabra en el campo de entrada obtengo un símbolo de cruz (símbolo de cierre) en la esquina del campo de entrada que está sucediendo solo en IE10.

Answer 1

No estoy seguro sobre el atributo placeHolder para el soporte de entrada en ie10, pero si quieres un marcador de posición en es decir, puedes hacerlo a través de jquery como este a continuación.

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;
    });
}

usted puede hacer lo mismo para la contraseña también ..

He intentado U algo así usando código ... creo que debería funcionar ...

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

Answer 2

Pruebe esto, es jquery pluin para marcador de posición en el navegador que no lo admite perfectamente. Dejando tu código php y agregando este js debería funcionar:

(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" in document.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));
    });
});

function setupPlaceholder(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() !== '''');
    });
}

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

function setupPasswords(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();
    });
}

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

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

Luego debes invocar el complemento en tu página php o en otro js simplemente por:

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

¡Espero que esto ayude!

Answer 3

Parece que su javascript está rompiendo la funcionalidad nativa del marcador de posición IE10.

Para probar esto y, con suerte, corregirlo, ajuste el javascript que ha escrito para los marcadores de posición en una declaración condicional, de modo que solo se aplique a IE9 y a continuación.

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

Alternativamente, hay un muy buen plugin jquery de Mathias Bynens que está disponible de forma gratuita y maneja todo esto por usted: https://github.com/mathiasbynens/jquery-placeholder

Algunos CMS ya tienen un complemento creado con este código. El plugin de Wordpress está aquí: http://wordpress.org/plugins/html5-placeholder-polyfill/