Introdução ao caso: frequentemente vemos alguns sites com caixas de texto da Textarea. Quando você entra, existem avisos de texto abaixo de quantas palavras você pode inserir. Hoje é implementar esta função. Obviamente, como uma página possui várias textaras, não é possível usar uma única lógica JS para controle, por isso deve ser encapsulada de uma maneira pequena. Obviamente, minha embalagem ainda tem algumas deficiências, mas a função básica é implementada.
Primeiro, introduza um único caso de implementação de textarea
Parte HTML:
<textAea id = "text_txt1"> </sexttarea> <span id = "num_txt1"> as 600 palavras restantes podem ser inseridas </span>
Parte do JS:
$ (function () {$ ('#text_txt1'). on ('keyup', function () {var txtVal = $ ('#text_txt1'). '+str+' word ');} else {$ ('#num_txt1 '). html (' restante pode inserir 0 palavras '); $ ('#text_txt1 '). val ($ ('#text_txt1 '). palavras} // console.log ($ ('#num_txt'). html (str));});})Em seguida, introduza vários casos de implementação de textarea na mesma página
Função ChanGeLength (obj, num) {obj.on ('keyUp', function () {var txtVal = obj.val (). length; // console.log (txtVal); var str = parseInt (600-txtVal); // console.log (str); if (str> 0) {num.html ('permanecem em' permanecem em 'permanecem (' permanecel); {num.html ('permanecendo entrada 0 palavras'); obj.val (obj.val (). substring (0, 600));} // console.log ($ ('#num_txt'). ChangeLength ($ ('#text_txt1'), $ ('#num_txt1')); ChangELength ($ ('#text_txt2'), $ ('#num_txt2')); c HANDELENGLE ($ ('#text_txt3'), $ ('#num_txt3')); ChangELength ($ ('#text_txt4'), $ ('#num_txt4');});Obviamente, a contagem de palavras necessária aqui também pode ser encapsulada dentro da função, mas não a encapsularei. Isso percebe que, ao inserir o texto, as palavras restantes serão exibidas automaticamente dentro do período. Quando o valor de entrada atingir o valor mais alto, as palavras restantes serão exibidas como 0 e o conteúdo não pode ser preenchido em novo conteúdo. Ao excluir o texto, o Span pode obter dinamicamente a contagem de palavras restantes.
Abaixo estão os códigos de outros, e desta vez também emprestei alguns dos métodos de escrita de outros
html:
<div> <p> Introdução: </p> <texttarea id = "content" name = "signo" style = "altura: 60px; overflow-y: hidden;" onkeyup = "changeLength (this, 60)"> </sexttarea> <div> <h3> 60 </h3> </div> </div>
JS:
// Verifique o comprimento da função textarea changeLength (obj, lg) {var len = $ (obj) .val (); $ (obj) .next (). encontre ("h3"). text (lg-len.length); if (len.length> = lg) {$ (obj) .Next ().O acima é o método de obter palavras restantes dinâmicas no Textarea com base no JS introduzido pelo editor. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!