Pinceladas da Web

Encontrar hoje uma boa Usabilidade em formulários está ficando cada vez mais difícil. Muitas vezes são criados formulários com muitos campos que se forem analisados metades deles não seriam usadas para nada, só estão ali para “tapar buracos”. Em outras situações os campos são extensos demais, ou pequenos demais, atrapalhando a boa legibilidade do que você está preenchendo.

O que devemos fazer em situações como essa? Arrancar os cabelos? Não se preocupe, vou mostrar aqui uma boa solução que encontrei no site Webtoolkit4.me, para aqueles campos de formulários onde eles são muito pequenos e o texto que você precisa digitar é muito grande (É o que mais acontece hoje em dia).

Observem a seguinte marcação HTML:

<form id="aform">
  <label for="type">Descrição longa:</label>
  <input name="type" type="text" id="type" size="20" />
  <div id="info"></div>
</form>

Como podem ver, um simples formulário com um campo label e um campo input, e uma div extra chamada info, onde sua função será de que ao digitar o texto no campo input e o mesmo o exceder, o texto irá aparecer por completo dentro dessa div info. Para fazer isso vamos utilizar a biblioteca jQuery:

$(document).ready(function(){
// Definimos aqui que por enquanto a div id="info" não deve aparecer.
$('#info').hide();
// Pegamos o tamanho do campo input texto
var size  =  $('#type').attr("size");
// Vamos fazer alguma coisa quando começar a digitar.
$('#type').keyup(
function(){
// Tudo que for digitado sera armazenado em uma variável
var entry = $(this).attr("value");
// O tamanho dela.
var current_length = $(this).attr("value").length;
// Se o nosso texto é maior que o campo input
// ele é mostrado na div id="info".
if (current_length>= size) {
$('#info').html("<strong>Você digitou até agora:</strong> " + entry);
$('#info').show('fast');
}
// Caso contrário ela fica oculta.
else $('#info').hide('fast');
});
});

Uma solução muito interessante, vejam o script em ação nesse exemplo.