w3schools color bootstrap javascript html internet-explorer placeholder

javascript - color - placeholder jquery



Marcadores de posición de entrada para Internet Explorer (17)

Al mirar la sección "Formularios web: marcador de posición de entrada" de HTML5 Polyfills del navegador cruzado , una que vi fue jQuery-html5-placeholder .

Probé la demo con IE9, y parece que envuelve tu <input> con un lapso y superpone una etiqueta con el texto del marcador de posición.

<label>Text: <span style="position: relative;"> <input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom"> <label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481">Hi Mom</label> </span> </label>

También hay otras cuñas allí, pero no las miré todas. Uno de ellos, Placeholders.js , se anuncia como "Sin dependencias (por lo que no es necesario incluir jQuery, a diferencia de la mayoría de las secuencias de comandos de relleno de poliuretano)".

Editar: para aquellos más interesados ​​en "cómo" ese "qué", cómo crear un relleno de marcador de posición HTML5 avanzado que recorre el proceso de creación de un complemento jQuery que hace esto.

Además, vea mantener el marcador de posición en foco en IE10 para comentarios sobre cómo el texto del marcador de posición desaparece al enfocarse con IE10, que difiere de Firefox y Chrome. No estoy seguro si hay una solución para este problema.

HTML5 introdujo el atributo de placeholder en input elementos de input , lo que permite mostrar un texto predeterminado en gris.

Lamentablemente, Internet Explorer, incluido IE 9, no lo admite.

Ya hay algunos scripts de simulador de marcador de posición disponibles. Normalmente funcionan colocando el texto predeterminado en el campo de entrada, le dan un color gris y lo eliminan nuevamente tan pronto como enfoca el campo de entrada.

El inconveniente de este enfoque es que el texto del marcador de posición está en el campo de entrada. Así:

  1. los scripts no pueden verificar fácilmente si un campo de entrada está vacío
  2. el procesamiento del lado del servidor debe verificar contra el valor predeterminado, para no insertar el marcador de posición en la base de datos.

Me gustaría tener una solución, donde el texto de marcador de posición no está en la entrada en sí.

Aquí hay una función javascript pura (no se necesita jquery) que creará marcadores de posición para IE 8 y versiones posteriores, y también funciona para contraseñas. Lee el atributo de marcador de posición HTML5 y crea un elemento de tramo detrás del elemento de formulario y hace que el fondo del elemento de formulario sea transparente:

/* Function to add placeholders to form elements on IE 8 and below */ function add_placeholders(fm) { for (var e = 0; e < document.fm.elements.length; e++) { if (fm.elements[e].placeholder != undefined && document.createElement("input").placeholder == undefined) { // IE 8 and below fm.elements[e].style.background = "transparent"; var el = document.createElement("span"); el.innerHTML = fm.elements[e].placeholder; el.style.position = "absolute"; el.style.padding = "2px;"; el.style.zIndex = "-1"; el.style.color = "#999999"; fm.elements[e].parentNode.insertBefore(el, fm.elements[e]); fm.elements[e].onfocus = function() { this.style.background = "yellow"; } fm.elements[e].onblur = function() { if (this.value == "") this.style.background = "transparent"; else this.style.background = "white"; } } } } add_placeholders(document.getElementById(''fm''))

<form id="fm"> <input type="text" name="email" placeholder="Email"> <input type="password" name="password" placeholder="Password"> <textarea name="description" placeholder="Description"></textarea> </form>

Con una implementación de jQuery, puede eliminar FÁCILMENTE los valores predeterminados cuando llegue el momento de enviarlos. A continuación hay un ejemplo:

$(''#submit'').click(function(){ var text = this.attr(''placeholder''); var inputvalue = this.val(); // you need to collect this anyways if (text === inputvalue) inputvalue = ""; // $.ajax(... // do your ajax thing here });

Sé que está buscando una superposición, pero es posible que prefiera la facilidad de esta ruta (ahora sabiendo lo que escribí arriba). Si es así, entonces escribí esto para mis propios proyectos y funciona muy bien (requiere jQuery) y toma solo un par de minutos implementarlo para todo su sitio. Ofrece texto gris al principio, gris claro cuando está enfocado y negro al escribir. También ofrece el texto de marcador siempre que el campo de entrada esté vacío.

Primero configure su formulario e incluya los atributos de marcador de posición en las etiquetas de entrada.

<input placeholder="enter your email here">

Simplemente copie este código y guárdelo como placeholder.js.

(function( $ ){ $.fn.placeHolder = function() { var input = this; var text = input.attr(''placeholder''); // make sure you have your placeholder attributes completed for each input field if (text) input.val(text).css({ color:''grey'' }); input.focus(function(){ if (input.val() === text) input.css({ color:''lightGrey'' }).selectRange(0,0).one(''keydown'', function(){ input.val("").css({ color:''black'' }); }); }); input.blur(function(){ if (input.val() == "" || input.val() === text) input.val(text).css({ color:''grey'' }); }); input.keyup(function(){ if (input.val() == "") input.val(text).css({ color:''lightGrey'' }).selectRange(0,0).one(''keydown'', function(){ input.val("").css({ color:''black'' }); }); }); input.mouseup(function(){ if (input.val() === text) input.selectRange(0,0); }); }; $.fn.selectRange = function(start, end) { return this.each(function() { if (this.setSelectionRange) { this.setSelectionRange(start, end); } else if (this.createTextRange) { var range = this.createTextRange(); range.collapse(true); range.moveEnd(''character'', end); range.moveStart(''character'', start); range.select(); } }); }; })( jQuery );

Para usar en solo una entrada

$(''#myinput'').placeHolder(); // just one

Así es como recomiendo que lo implemente en todos los campos de entrada en su sitio cuando el navegador no admita atributos de marcador de posición HTML5:

var placeholder = ''placeholder'' in document.createElement(''input''); if (!placeholder) { $.getScript("../js/placeholder.js", function() { $(":input").each(function(){ // this will work for all input fields $(this).placeHolder(); }); }); }

Creé mi propio plugin jQuery después de frustrarme porque las cuñas existentes ocultaban el marcador de posición en el foco, lo que crea una experiencia de usuario inferior y tampoco coincide con la forma en que lo manejan Firefox, Chrome y Safari. Este es especialmente el caso si desea enfocar una entrada cuando una página o ventana emergente se carga por primera vez, mientras sigue mostrando el marcador de posición hasta que se ingrese el texto.

https://github.com/nspady/jquery-placeholder-labels/

NOTA: el autor de este polyfill afirma que "funciona en prácticamente cualquier navegador que pueda imaginar", pero de acuerdo con los comentarios que no es cierto para IE11, sin embargo, IE11 tiene soporte nativo, al igual que la mayoría de los navegadores modernos.

Placeholders.js es el mejor relleno de marcador de posición que he visto, es liviano, no depende de JQuery, cubre otros navegadores más antiguos (no solo IE) y tiene opciones para marcadores ocultos de entrada y de ejecución.

PARA insertar el complemento y verificar el ie está perfectamente trabajadojquery.placeholder.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.placeholder.js"></script> <script> // To test the @id toggling on password inputs in browsers that don’t support changing an input’s @type dynamically (e.g. Firefox 3.6 or IE), uncomment this: // $.fn.hide = function() { return this; } // Then uncomment the last rule in the <style> element (in the <head>). $(function() { // Invoke the plugin $(''input, textarea'').placeholder({customClass:''my-placeholder''}); // That’s it, really. // Now display a message if the browser supports placeholder natively var html; if ($.fn.placeholder.input && $.fn.placeholder.textarea) { html = ''<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> and <code>textarea</code> elements.</strong> The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)''; } else if ($.fn.placeholder.input) { html = ''<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> elements, but not for <code>textarea</code> elements.</strong> The plugin will only do its thang on the <code>textarea</code>s.''; } if (html) { $(''<p class="note">'' + html + ''</p>'').insertAfter(''form''); } }); </script>

Puedes usar :

var placeholder = ''search here''; $(''#search'').focus(function(){ if ($.trim($(this).val()) === placeholder){ this.value =''''; } }).blur(function(){ if ($.trim($(this).val()) === ''''){ this.value = placeholder; } }).val(placeholder);

Se me ocurrió una secuencia de comandos simple de marcador de posición JQuery que permite un color personalizado y utiliza un comportamiento diferente de borrar entradas cuando se enfoca. Reemplaza el marcador de posición predeterminado en Firefox y Chrome y agrega soporte para IE8.

// placeholder script IE8, Chrome, Firefox // usage: <input type="text" placeholder="some str" /> $(function () { var textColor = ''#777777''; //custom color $(''[placeholder]'').each(function() { (this).attr(''tooltip'', $(this).attr(''placeholder'')); //buffer if ($(this).val() === '''' || $(this).val() === $(this).attr(''placeholder'')) { $(this).css(''color'', textColor).css(''font-style'',''italic''); $(this).val($(this).attr(''placeholder'')); //IE8 compatibility } $(this).attr(''placeholder'',''''); //disable default behavior $(this).on(''focus'', function() { if ($(this).val() === $(this).attr(''tooltip'')) { $(this).val(''''); } }); $(this).on(''keydown'', function() { $(this).css(''font-style'',''normal'').css(''color'',''#000''); }); $(this).on(''blur'', function() { if ($(this).val() === '''') { $(this).val($(this).attr(''tooltip'')).css(''color'', textColor).css(''font-style'',''italic''); } }); }); });

Simple como esto:

$(function() { ... var element = $("#selecter") if(element.val() === element.attr("placeholder"){ element.text("").select().blur(); } ... });

Te sugiero una simple función:

function bindInOut(element,value) { element.focus(function() { if(element.val() == value) element.val(''''); }). blur(function() { if(element.val() == '''') element.val(value); }); element.blur(); }

Y para usarlo, llámalo de esta manera:

bindInOut($(''#input''),''Here your value :)'');

yo uso jquery.placeholderlabels . Se basa en this y se puede mostrar this .

funciona en ie7, ie8, ie9.

el comportamiento imita el comportamiento actual de Firefox y Chrome, donde el texto "marcador de posición" permanece visible en el enfoque y solo desaparece una vez que se escribe algo en el campo.

Placeholdr es un relleno de jQuery de marcador de posición súper liviano que escribí. Es menos de 1 KB minificado.

Me aseguré de que esta biblioteca aborde sus dos preocupaciones:

  1. Placeholdr amplía la función jQuery $ .fn.val () para evitar valores de retorno inesperados cuando el texto está presente en campos de entrada como resultado de Placeholdr. Entonces, si te apegas a la API de jQuery para acceder a los valores de tus campos, no necesitarás cambiar nada.

  2. Placeholdr escucha los envíos de formularios y elimina el texto del marcador de posición de los campos para que el servidor simplemente vea un valor vacío.

De nuevo, mi objetivo con Placeholdr es proporcionar una solución sencilla para el problema del marcador de posición. Déjame saber sobre Github si hay algo más que te gustaría tener soporte de Placeholdr.

  • Funciona solo para IE9 +

La siguiente solución se une a los elementos de entrada de texto con el atributo marcador de posición. Emula un comportamiento de marcador de posición solo para IE y borra el campo de valor de la entrada en el envío si no se cambia.

Agregue este script e IE parece ser compatible con marcadores de posición HTML5.

$(function() { //Run this script only for IE if (navigator.appName === "Microsoft Internet Explorer") { $("input[type=text]").each(function() { var p; // Run this script only for input field with placeholder attribute if (p = $(this).attr(''placeholder'')) { // Input field''s value attribute gets the placeholder value. $(this).val(p); $(this).css(''color'', ''gray''); // On selecting the field, if value is the same as placeholder, it should become blank $(this).focus(function() { if (p === $(this).val()) { return $(this).val(''''); } }); // On exiting field, if value is blank, it should be assigned the value of placeholder $(this).blur(function() { if ($(this).val() === '''') { return $(this).val(p); } }); } }); $("input[type=password]").each(function() { var e_id, p; if (p = $(this).attr(''placeholder'')) { e_id = $(this).attr(''id''); // change input type so that the text is displayed document.getElementById(e_id).type = ''text''; $(this).val(p); $(this).focus(function() { // change input type so that password is not displayed document.getElementById(e_id).type = ''password''; if (p === $(this).val()) { return $(this).val(''''); } }); $(this).blur(function() { if ($(this).val() === '''') { document.getElementById(e_id).type = ''text''; $(this).val(p); } }); } }); $(''form'').submit(function() { //Interrupt submission to blank out input fields with placeholder values $("input[type=text]").each(function() { if ($(this).val() === $(this).attr(''placeholder'')) { $(this).val(''''); } }); $("input[type=password]").each(function() { if ($(this).val() === $(this).attr(''placeholder'')) { $(this).val(''''); } }); }); } });