Site Overlay

Detectando funcionalidades com Javascript

Para identificar, por exemplo, que o navegador em uso não possui suporte ao placeholder vamos utilizar um pouco de JavaScript, mas, em vez de tentar identificar em qual navegador estamos trabalhado com o navigator.userAgent, será mais seguro testar se o navegador possui realmente suporte à funcionalidade que precisamos. Podemos escrever um código específico para atender o Internet Explorer, mas isso não atingirá versões antigas do Mozilla Firefox, por exemplo. Detectando a funcionalidade em vez que possuir uma lista de versões de navegadores que precisam de uma correção garante um código mais simples e conciso.

Vamos escrever um teste específico para o atributo placeholder e caso você precise testar outras funcionalidades que possam não existir talvez será necessário usar alguma outra lógica. A biblioteca Modernizr foi criada para agrupar diversos testes de funcionalidades diferentes para facilitar a nossa vida. Mas neste caso vamos escrever o código nós mesmos, por ser um teste mais simples.

function supportsPlaceholder() {

return ‘placeholder’ in document.createElement(‘input’) &&

‘placeholder’ in document.createElement(‘textarea’);

}

A função é bem simples: caso a propriedade placeholder exista nos elementos input e textarea, ela retornará true. Caso algum dos elementos (ou ambos) não possua o atributo, ela retornará false. O teste não servirá de nada se não o utilizarmos, certo? Vamos fazer o seguinte: caso o navegador não passe no teste (retornando false a chamada desta função), vamos adicionar uma classe ao elemento html (o elemento raiz da página) para, através do CSS, aplicarmos um estilo diferente para navegadores sem suporte ao placeholder. Utilizando o jQuery, biblioteca mais usada para trabalhar com o DOM, ficamos com o seguinte código:

jQuery(function($) {

function supportsPlaceholder() {

return ‘placeholder’ in document.createElement(‘input’) &&

‘placeholder’ in document.createElement(‘textarea’);

}

if(!supportsPlaceholder()) {

$(‘html’).addClass(‘no-placeholder’);

}

});

 

Assim, o nosso CSS poderá aplicar regras específicas para páginas com a classe no-placeholder. Neste caso podemos exibir o label de cada campo e fazer outras mudanças no estilo do formulário.

.no-placeholder input {

border-radius: 3px;

border-top: 1px solid #999;

}

.no-placeholder label {

display: block;

}

Assim, o formulário se mantém funcional quando o navegador usado não tiver suporte ao que precisamos e os navegadores atuais terão o comportamento padrão que desenvolvemos anteriormente.

2

Source: scriptcase / Detectando funcionalidades com Javascript

Comments

comments

Leave a Reply

Your email address will not be published.