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>Código: Selecionar todos
input{
font-family:Verdana,Arial,Sans-Serif;
}Código: Selecionar todos
$(document).ready(function(){
$('input').focus(function(){
$(this).css('outline-color','#FF0000');
});
});