•  
     

Vamos focar com o .focus() - jQuery

Dizemos que um elemento está em focus (foco) quando clicamos nele ou passamos o cursor sobre ele. Se você já preencheu um formulário em uma página e viu que cada caixa de texto é destacada quando você clica ou passa o mouse sobre ela, você já viu o evento focus em ação!

O manipulador de evento .focus() funciona somente em elementos que podem receber um foco — a lista desses elementos é um pouco vaga, mas elementos HTML como <textarea> e <input> geralmente entram na lista.

Verifique o formulário que configuramos na aba dos Resultados. Se você clicar em um campo de entrada de dados, você verá que ele se destaca automaticamente, ficando em um agradável tom de azul bebê. Pena que azul bebê é para bebês! Queremos que nosso destaque seja vermelho.

Podemos fazer isso com duas ferramentas: .focus() e .css(). queremos codificar um pouco em jQuery para mudar a 'outline-color' (cor das bordas) de cada 'input' que ganhar destaque para 'red'.


HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form>
Name: <input type='text' name='name'></input>
</form>  
</body>
</html>


CSS

Código: Selecionar todos

input{
font-family:Verdana,Arial,Sans-Serif;
}


JavaScript

Código: Selecionar todos

$(document).ready(function(){
$('input').focus(function(){
$(this).css('outline-color','#FF0000');
});
});


Demo: http://jsfiddle.net/sa8b0b62/