Como dar suporte ao atributo de espaço reservado no IE8 e 9

Eu tenho um pequeno problema, o atributo de placeholder para checkboxs de input não é suportado no IE 8-9.

Qual é a melhor maneira de fazer esse suporte no meu projeto (ASP Net). Eu estou usando o jQuery. Preciso usar algumas outras ferramentas externas para isso?

Http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html é uma boa solução?

Você poderia usar este plugin jQuery: https://github.com/mathiasbynens/jquery-placeholder

Mas o seu link parece ser também uma boa solução.

Você pode usar qualquer um desses polyfills:

Esses scripts adicionarão suporte para o atributo de placeholder em navegadores que não suportam, e não exigem o jQuery!

o $ .Browser.msie não está mais no JQuery mais recente … você tem que usar o $ .support

como abaixo:

   

se você usar o jquery, você pode fazer assim. deste site Marcador com Jquery

 $('[placeholder]').parents('form').submit(function() { $(this).find('[placeholder]').each(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); } }) }); 

estes são os links alternativos

  1. Biblioteca jquery de espaço reservado
  2. Polyfills HTML5 – vá para a seção de espaço reservado

Eu tive problemas de compatibilidade com vários plugins que eu tentei, isso parece-me ser a maneira mais simples de suportar espaços reservados em inputs de texto:

 function placeholders(){ //On Focus $(":text").focus(function(){ //Check to see if the user has modified the input, if not then remove the placeholder text if($(this).val() == $(this).attr("placeholder")){ $(this).val(""); } }); //On Blur $(":text").blur(function(){ //Check to see if the use has modified the input, if not then populate the placeholder back into the input if( $(this).val() == ""){ $(this).val($(this).attr("placeholder")); } }); } 
 $(function(){ if($.browser.msie && $.browser.version <= 9){ $("[placeholder]").focus(function(){ if($(this).val()==$(this).attr("placeholder")) $(this).val(""); }).blur(function(){ if($(this).val()=="") $(this).val($(this).attr("placeholder")); }).blur(); $("[placeholder]").parents("form").submit(function() { $(this).find('[placeholder]').each(function() { if ($(this).val() == $(this).attr("placeholder")) { $(this).val(""); } }) }); } }); 

tente isso

Eu uso thisone, é apenas Javascript.

Eu simplesmente tenho um elemento de input com um valor e, quando o usuário clica no elemento de input, ele o altera para um elemento de input sem um valor.

Você pode facilmente mudar a cor do texto usando CSS. A cor do espaço reservado é a cor na id #IEinput e a cor que o seu texto typescript será a cor no id #email. Não use getElementsByClassName, porque as versões do IE que não suportam um placeholder, também não suportam getElementsByClassName!

Você pode usar um espaço reservado em uma input de senha, definindo o tipo de input de senha original para o texto.

Tinker: http://tinker.io/4f7c5/1 – Servidores JSfiddle estão em baixo!

* desculpe pelo meu mau inglês

JAVASCRIPT

 function removeValue() { document.getElementById('mailcontainer') .innerHTML = ""; document.getElementById('email').focus(); } 

HTML

    

Para os outros que chegam aqui. Isto é o que funcionou para mim:

 //jquery polyfill for showing place holders in IE9 $('[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(''); } }) }); 

Basta adicionar isso ao seu arquivo script.js. Cortesia de http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Como a maioria das soluções usa jQuery ou não é tão satisfatória quanto eu gostaria que fosse, escrevi um trecho para mim mesmo para mootools.

 function fix_placeholder(container){ if(container == null) container = document.body; if(!('placeholder' in document.createElement('input'))){ var inputs = container.getElements('input'); Array.each(inputs, function(input){ var type = input.get('type'); if(type == 'text' || type == 'password'){ var placeholder = input.get('placeholder'); input.set('value', placeholder); input.addClass('__placeholder'); if(!input.hasEvent('focus', placeholder_focus)){ input.addEvent('focus', placeholder_focus); } if(!input.hasEvent('blur', placeholder_blur)){ input.addEvent('blur', placeholder_blur); } } }); } } function placeholder_focus(){ var input = $(this); if(input.get('class').contains('__placeholder') || input.get('value') == ''){ input.removeClass('__placeholder'); input.set('value', ''); } } function placeholder_blur(){ var input = $(this); if(input.get('value') == ''){ input.addClass('__placeholder'); input.set('value', input.get('placeholder')); } } 

Confesso que parece um pouco mais MAIS do que outros, mas funciona bem. __placeholder é uma class ccs para tornar a cor do texto do espaço reservado.

Eu usei o fix_placeholder em window.addEvent (‘domready’, … e para qualquer código adicionado adicionalmente como pop-ups.

Espero que você goste.

Atenciosamente.

Eu usei o código deste link http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html

Mas na detecção de navegador eu usei:

 if (navigator.userAgent.indexOf('MSIE') > -1) { //Your placeholder support code here... } 
  

Adicione o código abaixo e isso será feito.

    

Faça o download do código completo e da demonstração em https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip

Aqui está uma function javascript que irá criar espaços reservados para o IE 8 e abaixo e também funciona para senhas:

 /* 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')) 
 
   

Correção simples!

Há uma correção com CSS, basta colocar esse código no arquivo de estilo e todos os marcadores devem funcionar corretamente:

 input.your-input-class: -ms-input-placeholder { color: #000000; //Your font color }