javascript - validar - poner asteriscos contraseña html

Mostrando texto de marcador de posición para campo de contraseña en IE

Question

Sé que hay un montón de preguntas, pero estoy intentando perfeccionar las mías.

Mi código actual funciona muy bien y hace lo que se supone que debe hacer. El problema es que cuando voy a colocar el marcador de posición de "contraseña", coloca el marcador de posición en los caracteres de enmascaramiento. ¿Alguna idea sobre cómo evitar eso?

    $(function() {
if(!$.support.placeholder) { 
        var active = document.activeElement;
    $('':text'').focus(function () {
        if ($(this).attr(''placeholder'') != '''' && $(this).val() ==  $(this).attr(''placeholder'')) {
            $(this).val('''').removeClass(''hasPlaceholder'');
        }
    }).blur(function () {
        if ($(this).attr(''placeholder'') != '''' && ($(this).val() == '''' || $(this).val() == $(this).attr(''placeholder''))) {
            $(this).val($(this).attr(''placeholder'')).addClass(''hasPlaceholder'');
        }
    });
    $('':text'').blur();
    $(active).focus();
    $(''form'').submit(function () {
        $(this).find(''.hasPlaceholder'').each(function() { $(this).val(''''); });
    });

    var active = document.activeElement;
    $('':password'').focus(function () {
        if ($(this).attr(''placeholder'') != '''' && $(this).val() == $(this).attr(''placeholder'')) {
            $(this).val('''').removeClass(''hasPlaceholder'');
        }
    }).blur(function () {
        if ($(this).attr(''placeholder'') != '''' && ($(this).val() == '''' || $(this).val() == $(this).attr(''placeholder''))) {
            $(this).val($(this).attr(''placeholder'')).addClass(''hasPlaceholder'');
        }
    });
    $('':password'').blur();
    $(active).focus();
    $(''form'').submit(function () {
        $(this).find(''.hasPlaceholder'').each(function() { $(this).val(''''); });
    });
}
   });

Mi campo para el pase:

  <div id="loginform_pass"><input class="login" tabindex="2" type="password" placeholder="Password" name="password" maxlength="30"></div>

Answer 1

Me encontré con este problema con IE antes. Aquí está mi solución :)

http://jsfiddle.net/mNchn/

Answer 2

¿Podría cambiar el campo de texto original con un campo de contraseña?

$(''#pass'').focus(
    function(){
        var pass = $(''<input id="pass" type="password">'');
        $(this).replaceWith(pass);
        pass.focus();
    }
);

<input id="pass" type="text" value="Passowrd">

http://jsfiddle.net/UrNFV/

Answer 3

Si estoy entendiendo este derecho, quiere que el campo diga "Contraseña" cuando no se haya tecleado nada en él; sin embargo, "Contraseña" se muestra como "********".

Una solución decente para eso (que también se degrada graciosamente, dependiendo de cómo se codifica) es:

1. Coloque una ETIQUETA antes de ingresar la contraseña. Establezca el texto de la ETIQUETA en "Contraseña", y configure su atributo para apuntar a la ID de la ENTRADA, de modo que la ENTRADA se enfoque cuando se hace clic en la ETIQUETA.
2. Use CSS para colocar la ETIQUETA encima de la ENTRADA, de manera que se superpongan, y parece que "Contraseña" está dentro de la ENTRADA.
3. Haga que la ETIQUETA solo sea visible cuando se le aplique alguna clase de CSS ( .showMe , por ejemplo).
4. Use JavaScript para ocultar la ETIQUETA
   • ... si el valor de INPUT es una cadena vacía
   • ... o si el usuario ha seleccionado (enfocado) la ENTRADA.

Answer 4

Dependiendo de si desea o no poder cambiar dinámicamente el texto dentro del marcador de posición, su solución más simple podría ser que el texto de marcador de posición sea una imagen.

input {
    background: url(_img/placeholder.png) 50% 5px no-repeat;
    .
    .
    .
}
input:focus {
    background: none;
}

Claramente, hay muchas formas diferentes de utilizar este método, y tendrá que usar algún tipo de solución para obtener :focus para trabajar en los navegadores que no lo admiten.

Answer 5

También puede intentar esto ... detecta que el navegador no tiene soporte para marcador de posición y funciona para todos los tipos de entrada

function FauxPlaceholder() {
        if(!ElementSupportAttribute(''input'',''placeholder'')) {
            $("input[placeholder]").each(function() {
                var $input = $(this);
                $input.after(''<input id="''+$input.attr(''id'')+''-faux" style="display:none;" type="text" value="'' + $input.attr(''placeholder'') + ''" />'');
                var $faux = $(''#''+$input.attr(''id'')+''-faux'');

                $faux.show().attr(''class'', $input.attr(''class'')).attr(''style'', $input.attr(''style''));
                $input.hide();

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

                $input.blur(function() {
                    if($input.val() === '''') {
                        $input.hide();
                        $faux.show();
                    }
                });
            });
        }
    }
    function ElementSupportAttribute(elm, attr) {
        var test = document.createElement(elm);
        return attr in test;
    }

Answer 6

Tuve el mismo problema, así que escribí un pequeño complemento

$.fn.passLabel = function(){
var 
T = $(this),
P = T.find(''input[type=password]''),
V = pass.val();

P.attr(''type'',''text'');
P.focus(function(){ 
if(V == "")
P.attr(''type'',''password'');
});
}

ahora solo lo llama para que desde allí encuentre todos los campos de entrada con el atributo de contraseña.

p.ej.

$(''form'').passLabel();

Answer 7

Aquí mi plugin:

if(jQuery.support.placeholder==false){
    // No default treatment
    $(''[placeholder]'').focus(function(){
        if($(this).val()==$(this).attr(''placeholder''))
            $(this).val('''');
        if($(this).data(''type'')==''password'')
            $(this).get(0).type=''password'';
    });
    $(''[placeholder]'').blur(function(){
        if($(this).val()==''''){
            if($(this).attr(''type'')==''password''){
                $(this).data(''type'',''password'').get(0).type=''text'';
            }
            $(this).val($(this).attr(''placeholder''));
        }
    }).blur();
}

Answer 8

Un poco tarde, sin embargo, el mismo aquí, yo también estaba trabajando en el problema IE9 no muestra el marcador de contraseña como texto, en casi todas las respuestas en Internet algunos sugieren cambiar el tipo, pero si lo haces, tendrás otro problema al iniciar sesión página como cuando verá con doble clic en el campo de contraseña, ya que su tipo cambió a texto de contraseña, por cierto, funciona con prop. ej. prop ("tipo", "contraseña") si quiere cambiar el tipo de un elemento.

por otro lado, creo que la mayoría de las respuestas provienen de una única solución, como el enfoque y las acciones de desenfoque de los elementos. pero cuando aplique este complemento, también se realizarán otros campos de texto, no existe una solución específica o puedo decir generlizada, todavía tengo un problema menor en la página de inicio de sesión con el campo de contraseña, pero está mostrando el texto correctamente. de todas formas. aquí es cómo configuré, copié, cambié y / u otras torres heredadas aquí.

(function($) {
    $.fn.placeholder = function() {
        $(''input[placeholder], textarea[placeholder]'').focus(function() {
            var input = $(this);
            if (input.val() === input.attr(''placeholder'')) {
                if (input.prop("id") === "password") {
                    input.prop("type", "password");
                }
                input.val('''');
                input.removeClass(''placeholder'');
            }
        }).blur(function() {
            var input = $(this);
            if (input.val() === '''' || input.val() === input.attr(''placeholder'')) {
                input.addClass(''placeholder'');
                if (input.prop("type") === "password") {
                    input.prop("type", "text");
                }
                input.val(input.attr(''placeholder''));
            }
        }).blur().parents(''form'').submit(function() {
            $(this).find(''input[placeholder], textarea[placeholder]'').each(function() {
                var input = $(this);
                if (input.val() === input.attr(''placeholder'')) {
                    input.val('''');
                }
            });
        });
    };
})(jQuery);

sigue siendo un prolema activo ...: D