Che cosa utilizzate per supportare gli attributi segnaposto nei browser?Attributo segnaposto non supportato in IE. Eventuali suggerimenti?
Attualmente, sto usando:
https://github.com/mathiasbynens/Placeholder-jQuery-Plugin
provato anche questo plugin senza alcun risultato:
https://github.com/danbentley/placeholder
ma non sembra funzionare con IE ... Altro specificamente IE 8. Altri suggerimenti/alternative?
Devo dimenticare l'attributo segnaposto per ora?
Hai ragione che IE8 non supporta l'attributo placeholder. placeholder fa parte delle specifiche HTML5 e IE8 è stato rilasciato molto tempo prima che HTML5 fosse pensato.
Il modo migliore per gestirlo senza problemi è utilizzare uno strumento come Modernizr per rilevare se il browser supporta la funzione segnaposto ed eseguire uno script di polyfill JS se non è supportato.
if(!Modernizr.input.placeholder) {
//insert placeholder polyfill script here.
}
Ci sono numerosi script di polyfill segnaposto disponibili per il download. Scegline uno che utilizzi l'attributo placeholder in modo che sia sufficiente definire la stringa segnaposto in un unico punto per tutti i browser. Eccone uno che potresti provare: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
Spero che questo aiuti.
Il problema è che anche gli script di polyfill JS non sembrano funzionare con IE –
+1 per il riferimento del collegamento. –
Un'altra buona risorsa, ha un elenco di collegamenti nella sezione "segnaposto": https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills –
Questo è quello che ho usato in uno dei miei progetti. L'unica cosa è che avevo solo bisogno di un segnaposto su un elemento, quindi potrebbe non funzionare subito per la tua situazione. Ma solo per avere l'idea di come semplice il codice è:
(function(){
var nameInput = document.getElementById('your-id-here');
var placeHolderSupport = ("placeholder" in document.createElement("input"));
if(!placeHolderSupport)
{
//show hint in gray
var placeholder = nameInput.getAttribute('placeholder');
nameInput.onfocus = function(){ if(this.value==placeholder){this.value='';this.className='';} };
nameInput.onblur = function(){ if(this.value==''){this.value=placeholder;this.className='placeholder';} };
nameInput.onblur();
}
})()
In effetti nessuno degli IE del 19 ottobre 2011 supporta l'attributo segnaposto. L'ho provato in 7, 8 e 9 e nessuno di loro sembra riconoscerlo. Si potrebbe pensare a ie9, visto come supporrebbe supportare css3 e html5 avrebbe risolto questo problema ma non sembra così.
Come semplice soluzione che non è bella, ma ottiene il lavoro fatto è possibile utilizzare alcuni javascript come questo:
<input type="text" value="Enter ZIP"
onfocus="if(this.value == 'Enter ZIP'){this.value = '';}" />
Questo non restituirà il valore 'onblur' – gdoron
ci sono un bel paio di script polyfill per l'attributo segnaposto. Ecco one that seems to work well.
Basta ricordare di chiamare $('input, textarea').placeholder(); nel codice JS e possibilmente aggiungere una regola CSS, ad es. .placeholder { color: #aaa }.
Ecco il codice direttamente dal mio progetto che funziona in modo nativo in chrome e utilizza il polyfill in IE8 ... c'è un avviso qui per i test che mostra quando viene chiamato il polyfill. È necessario caricare modernizr come prerequisito per l'utilizzo di questo codice, ma nella sezione <head> verrà incluso un semplice script.
<script type="text/javascript">
$('document').ready(function() {
if (!Modernizr.input.placeholder) {
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
alert("no place holders");
}
});
</script>
Ciò causerà problemi se utilizzeremo i valori di posizionamento in javascript. Otterremo del testo al posto delle stringhe vuote che avrebbero dovuto essere. –
cosa ho fatto nel mio progetto per evitare che questo fosse nell'evento di invio se il valore del testo era uguale al valore del segnaposto ho impostato il valore su null. È ancora un po 'hacky, ma sfortunatamente il supporto ai browser più vecchi tende a farlo a volte. –
Con tutte le altre risposte ed esempi che ho visto, ho riscontrato alcuni problemi. Ho scritto la mia soluzione per risolvere questi problemi e ho deciso di postarla qui.Le 2 cose il mio codice si gestisce correttamente che le altre soluzioni sembrano avere problemi con sono:
Includere Modernizr e JQuery come segue:
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="modernizr-2.6.2.js"></script>
Aggiungete un po 'di CSS come ad esempio:
<style type="text/css" media="all">
.placeholder {
color: #aaa;
}
</style>
Quindi il codice principale che vi serve è:
<script type="text/javascript">
$(document).ready(function() {
// Only do anything if the browser does not support placeholders
if (!Modernizr.input.placeholder) {
// Format all elements with the placeholder attribute and insert it as a value
$('[placeholder]').each(function() {
if ($(this).val() == '') {
$(this).val($(this).attr('placeholder'));
$(this).addClass('placeholder');
}
$(this).focus(function() {
if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
$(this).val('');
$(this).removeClass('placeholder');
}
}).blur(function() {
if($(this).val() == '') {
$(this).val($(this).attr('placeholder'));
$(this).addClass('placeholder');
}
});
});
// Clean up any placeholders if the form gets submitted
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
$(this).val('');
}
});
});
// Clean up any placeholders if the page is refreshed
window.onbeforeunload = function() {
$('[placeholder]').each(function() {
if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) {
$(this).val('');
}
});
};
}
});
</script>
ho faticato con questo me stesso. Ho trovato un lavoro in giro. Funziona piuttosto bene nel mio IE8 e in Chrome. Ho sviluppato un lavoro fresco intorno e lo hanno spiegato di seguito ...
HTML
<input type="text" class="input-remover badinput" value="Business Name">
<input type="text" class="input-remover badinput" value="Business Address 1">
<input type="text" class="input-remover badinput" value="Business Address 2">
<input type="text" class="input-remover badinput" value="City">
Tutti i campi di input con la classe di ingresso-remover saranno interessati. Inserisci semplicemente le parole che vuoi utilizzare come segnaposto all'interno del valore. La classe badinput viene utilizzata per impedire a qualcuno di inviare campi di input con i valori predefiniti.
JQuery
var textval
$(".input-remover").click(function(){
textval = this.value;
$(this).addClass("currentspot");
if ($(this).hasClass("placeholder"))
{
}else{
$(this).val("");
}
});
$("input").keypress(function(){
$(".currentspot").removeClass("badinput");
$(".currentspot").addClass("placeholder");
});
$("input").blur(function(){
if ($(this).hasClass("placeholder"))
{
$(".currentspot").removeClass("currentspot");
}else{
$(".currentspot").val(textval);
$(".currentspot").removeClass("currentspot");
}
});
Onestamente, Id spiegare questa parte, ma penso davvero itd essere più facile da dire, Non modificarlo. È buono così com'è. Sì, probabilmente potresti modificarlo ma lo eviterei a meno che tu non sappia cosa stai facendo per evitare che agisca.
E Ive ha anche incluso un JsFiddle che mostra il suo funzionamento. Spero possa essere d'aiuto. Considero la maggior parte di queste cose che mi piace essere un rig. ma almeno lo fa da allora. In bocca al lupo!
Fiddle Here
Se il supporto IE8 è fondamentale, allora, sì, si dovrebbe dimenticare caratteristiche che non supporta. Se i segnaposto sarebbero belli per i tuoi utenti ma non sono fondamentali, usali e non preoccuparti di IE8. – robertc
Se sono fondamentali, allora li stai usando male. Un suggerimento non dovrebbe mai essere un requisito essenziale per comprendere un input. – Quentin
Sei riuscito a trovare una soluzione per questo? – learning