Saiba como criar placeholder crossbrowser com jQuery

Olá pessoal, tudo bom?
Neste tutorial iremos criar um placeholder de inputs com jQuery que funcione em todos os browsers, inclusive no IE, acredita? =)
Espero que gostem.
Vamos lá!

O que é Placeholder

O placeholder é um atributo utilizado em elementos de formulário para apresentação de um “hint” (pequena mensagem) que descreve o valor que deve se informado naquele determinado campo.

Sua estrutura padrão é:


Infelizmente, devido as incompatibilidades do nosso amigo “IE”, ele não funciona no IE9 e anteriores, somente IE10+.

O html

Em nosso exemplo continuaremos a utilizar o atributo padrão placeholder, pois ele vai funcionar nos browsers como: firefox, chrome, opera IE10+ e etc, e quando for IE9-, ele vai ajudar a funcionar nosso script.

o Script

Vamos analisar o script:

Utilizando a biblioteca jQuery, o que estamos fazendo é:

  1. Encontrando cada elemento input[type=text] e textarea que estiver na página;
  2. Armazenando em uma variável o seu atributo *placeholder;
  3. Atribuindo ao elemento o texto que foi armazenado na variável ph, ou seja: informe seu email;
  4. Com a função focusout estamos dizendo que: ao tirar o foco do elemento, se não existir valor no input, vai ser inserido o valor da variável ph
  5. Com a função click estamos dizendo que: ao clicar no elemento, se o valor do elemento for igual ao valor da variável ph o valor deve ficar igual a vazio, ou seja, ao clicar o valor do input some, caso não seja igual ele vai permanecer com o valor informado pelo usuário;

Restringindo o script somente aos IE9-

O script anterior vai funcionar em todos os browsers sem exceção, substituindo a funcionalidade padrão do atributo placeholder, mas caso você queira que esse script funcione apenas nos IEs anteriores ao 10, então você pode utilizar o código abaixo. Dessa forma deixamos que o atributo placeholder funcione normalmente nos demais browsers.

Finalizando

Desa forma o placeholder vai funcionar em todos os browsers sem complicações.

Espero que vocês tenham gostado e que este tutorial possa te ajudar.

Não deixem de comentar, ok?

Muito obrigado e até a próxima.

TAGS: ,

AUTOR: Gabriel Costa
Gabriel Costa

Trabalho com desenvolvimento web a mais de 5 anos e atualmente desenvolvo projetos para órgãos do governo federal na área de interface digital, programação e design. Tenho parceria na empresa AidWeb - Desenvolvimento web e trabalho desenvolvendo websites e protótipos de sistemas acessíveis e responsíveis.

ARTIGOS RELACIONADOS

0

Deixe o seu comentário!

Autentificado como . Sair desta conta »

<pre lang="aqui vai o tipo de linguagem (js, html, css, php...)">
   Agora você posta seu código a vontade!
</pre> //aqui você fecha o código