CSS Focus em input no IE

31 03 2008

A algum tempo atrás escrevi um texto sobre como alterar o css de um input usando a regra focus, o problema que o maledeto do IE, nem mesmo o IE7 consegue entender esta simples regra, então como de costume nos programadores temos que inventar mecanismos para as coisas funcionarem no IE, enfim, ai vai uma função em Javascript usando a biblioteca prototype que faz isso, quando o focus vai para um input ele altera o CSS do mesmo, e quando o focus sai, ou seja, quando acontece o blur o CSS volta ao normal, tem que fazer e desfazer a treta do CSS pra ficar bom

Event.observe(window,'load',function(){
   $$('input[type=text]').each(function(e){
      Event.observe(e,'focus',function(){
         this.setStyle('color:red');
      })
      Event.observe(e,'blur',function(){
         this.setStyle('color:#333');
      })
   })
})

Me baseei na função escrita pelo (…) bom ele não tem um nome assim propriamente dito ele se intitula de S.

OBS 1: O script acima usa uma regra de CSS 2.1, type=’text’, e segundo o manual do prototype apenas na versão 1.5 o operador $$ passou a reconhecer tais atributos, então se você estiver usando uma versão anterior a 1.5 pelamordedeus atualiza pra nova :). Essa observação se deve ao fato de que o Luiz (camarada aqui do trampo) jurou de pé junto que o script estava com pau mas o prototype dele era o 1.4, que isso Luiz js diga não ao js ancião!


Ações

Information

4 responses

31 03 2008
S

8D MUAHAHAHAHA! Adorei o “pelo (…) bom ele não tem um nome assim propriamente dito ele se intitula de S”.
Grato pela referência! E agree em mais uma coisa. IE FEDE!

1 04 2008
Maurício rech

hiuohui
boa essa adaptação hehehe

5 11 2009
Naldo

Como estender essa função, à todos os componentes(input,select,textarea,..)?

23 11 2009
battisti

Nessa caso eu aconselho vc a colocar uma classe nos teus elementos e utilizar

$$(‘.nome_da_classe’).each(function(e){ … }

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: