As vezes precisamos ajudar o usuário à preencher formulários, dizendo o que pode e não pode ser digitado nos campos. Na minha opnião este tipo de ajuda nunca é demais. Valendo-se da filosofia do jQuery (escrever pouco, produzir muito), escrevi este script para tal.
var help = function() { return { init: function() { var $form = $('form'); var tip = null; $(':text',$form).each(function(){ $(this).bind('focus',function(){ tip = document.createElement('span'); $(this).after( $(tip).text( $(this).attr('tips') ) ); }).blur(function(){ if (tip) { $(tip).remove(); tip = null; } return; }); }); } } }(); $(document).ready(help.init);
HTML
<form> <input type="text" name="teste1" tips="Este input é muito importante..." /><br /> <input type="text" name="teste2" tips="Digite qualquer coisa..." /><br /> <input type="text" name="teste3" tips="Terceiro, esta quase acabando..." /><br /> <input type="text" name="teste4" tips="Seja persistente" /><br /> <input type="text" name="teste5" tips="Último input, caso tenha preenchido os anteriores, boa sorte!" /> </form>
[s]
JunioR
essa parte do codigo nao funciona
$(‘:text’,$form).each(function(){
ele nao captura o form
como voce fez?
$form é apenas uma variável. Nesta linha estou buscando todos os inputs type text dentro do contexto do formulário
var $form = $('form');
$form retorna um objeto jQuery com o DOM da tag form
Demo
[s]