jQuery: uma barra de progresso para mostrar o "recheio" de um textarea

Muitas vezes os problemas parecem fáceis de resolver, provar o mais difícil do que o esperado, e isso é que normalmente o que há para perder metade extricating um dia de trabalho repetir mais ou menos ortodoxos websites e febril consultas, desesperado por alguém que já enfrentou o problema.

Quando um projeto que eu tinha a necessidade de limitar o número de caracteres permitido em uma textarea eu pensei que eu resolvido em poucos minutos, não foi assim, eu encontrei várias soluções na net, mas não me convencer até o fim, então eu decidi implementar algo personalizado usando jQuery e excelente jQueryUI , no componente específico da progessbar pacote.

Recuperação de arquivos necessários

Colleghiamoci para http://jqueryui.com/ e clique no botão "download personalizado Build" no canto superior direito.
Na próxima página, selecione os componentes úteis, e um dos widgets disponíveis decidimos levar apenas o progressbar.

Nós escolhemos o modelo gráfico da lista drop-down do lado direito e clique em "Download". Descompacte o pacote que você acabou de baixar e encontrar três pastas e um arquivo na raiz:

• pasta css contendo o tema, no nosso caso o padrão, ui-leveza
• desenvolvimento pacote contém exemplos e documentação
• js: contém os dois arquivos necessários para executar a nossa solução; jquery e jquery-ui-1.4.4.min.js-1.8.9.custom.min.js
• index.html: uma página que nos permite ver um exemplo de tema / os widgets que escolhemos

Para o nosso pequeno exemplo irá criar uma estrutura simples da seguinte forma:

• pasta descompactada para jQueryUI (jquery-ui-1.8.9.custom)
• file.html pacote contendo o textarea
• File.js contendo o código jQuery

Nós criamos nosso arquivo HTML, dar-lhe um nome significativo (vamos chamá mrw_jquery_txtcheck.html) e inserir na cabeça tag inclusões necessárias: o link para o tema css arquivos e jQuery js e jQueryUI.

 href = "jquery-ui-1.8.9.custom/css/ui-lightness/jquery-ui-1.8.9.custom.css" <link type="text/css" rel="stylesheet" />







 <script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-1.4.4.min.js"> </ script>







 <script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js"> </ script>

Adicione o textarea no corpo:

 



 <div> <textarea name="limitedOne" id="limitedOne" style='width:250px;height:100px;'> </ textarea> </ div>

 

Em seguida, insira o div que contém o progressbar e um espaço reservado para lhe dar uma idéia de quantos personagens também são numéricos.

 <div style="height: id="progress" 20px;"> </ div>







 Disponível <p> <span id="charCounter"> 255 </ span> caracteres. </ P>

Agora podemos proceder para escrever o código em um arquivo separado jQuery JavaScript / com as funções necessárias, que depois também incluí-lo na tag head, vamos chamá check_textarea.js.
Em primeiro lugar definir as variáveis ​​básicas; caracteres permitidos e aqueles disponíveis têm o mesmo valor no início:

 MAX_CHARS = 255;







 Restantes = MAX_CHARS;

Então definir a função que controla e melhora progressbar e contra:

 checkTextareaLength função () {





  



 current_length == undefined var = $ ("# limitedOne"). val () comprimento.?

 



 0: $ ("# limitedOne") Val () de comprimento;..



  



 = Restante (MAX_CHARS - current_length);



	

  



 if (restante> 0) {

	

    



 $ ("# LimitedOne") ($("# LimitedOne val ") Val () Substring (0, MAX_CHARS))...;



  



 Else {}



    



 $ ("# CharCounter") Html (restante).;



    



 var pv = Math.floor ((((MAX_CHARS-Restante) / MAX_CHARS) * 100));



    



 Progressbar $ ('# Progress') ('valor', pv).;



  



 }







 }

Vamos analisar o código: a primeira linha no checkTextareaLength obtém o valor atual do textarea usando o val function () jQuery, em seguida, contar o número de caracteres inseridos através da leitura do atributo de comprimento.
Na linha seguinte apresenta o número de caracteres disponíveis para a diferença. Neste ponto existem duas possibilidades.

1. Permanecendo a variável é menor que zero (por exemplo, depois de um copy / paste) o bloco se pega o valor do textarea e limites por ela a 255 caracteres usando o substring JavaScript nativa

 



 $ ("# LimitedOne") ($("# LimitedOne val ") Val () Substring (0, MAX_CHARS))...;

 

2. Restante é maior que zero, então bloco no período primeira é reforçada com o número de caracteres da esquerda:

 



 $ ("# CharCounter") Html (restante).;

 

Então a função calcula a relação entre o número máximo de caracteres disponíveis e aquelas que actualmente incluído, as rodadas de função de biblioteca do Math.floor resultado (para baixo) para o mais próximo:

 



 var pv = Math.floor ((((MAX_CHARS-Restante) / MAX_CHARS) * 100));

 

Neste ponto só podemos atribuir o valor encontrado no progressbar

 



 Progressbar $ ('# Progress') ('valor', pv).;

 

Vamos escrever o código que é executado no Pronto DOM.
Nós inicializar o bind progressbar e realizar os eventos que você quer interceptar: o keypress, o mouseout, alterar e o desfoque. Monitorá-los todos para interceptar o evento que o usuário deve usar o copiar / colar.
Note-se que a chamada de função é adiada por alguns centésimos de segundo através do setTimeout função nativa por isso não deixe de ter sempre o valor no momento oportuno, quando o usuário terminar de digitar.

 $ (Function () {



  



 $ ("# Progress") Progressbar ().;



  



 Bind $ ("# LimitedOne.") ("Mudança keypress mouseout blur ', function () {



    



 setTimeout ("checkTextareaLength ()", 200);



  



 });







 });

• <<
• 1
• 2
• >>