Introducción del caso: a menudo vemos algunos sitios web con cuadros de texto TextAREA. Cuando ingresa, hay indicaciones de texto a continuación cuántas palabras puede ingresar. Hoy es implementar esta función. Por supuesto, dado que una página tiene varias texturas, no es posible usar una sola lógica JS para el control, por lo que debe encapsularse de una manera pequeña. Por supuesto, mi empaque todavía tiene algunas deficiencias, pero la función básica se implementa.
Primero, introduzca un solo caso de implementación de TextARea
Parte de HTML:
<Textarea id = "text_txt1"> </textarea> <span id = "num_txt1"> Las 600 palabras restantes se pueden ingresar </span>
JS PARTE:
$ (function () {$ ('#text_txt1'). on ('keyUp', function () {var txtVal = $ ('#text_txt1'). val (). Longitud; console.log (txtval); var str = parseint (600-txtval); console.log (str); if (str> 0 ) {$ ('#num_txt1'). html ('restante puede ingresar'+str+'word');} else {$ ('#num_txt1'). html ('restante puede ingresar 0 palabras'); $ ('#text_txt1'). Val ($ ('#text_txt1'). Val (). que o igual a 0, el número de palabras no se puede aumentar, solo puede ser de 600 palabras} // console.log ($ ('#num_txt'). html (str));});})Luego introduzca múltiples casos de implementación de TextARea en la misma página
function ChangeLength (obj, num) {obj.on ('keyUp', function () {var txtVal = obj.val (). longitud; // console.log (txtval); var str = parseInt (600 txtVal); // console.log (str> str> 0) {num.html ('restable input'+»word '); {num.html ('Entrada restante 0 palabras'); obj.val (obj.val (). subString (0, 600));} // console.log ($ ('#num_txt'). html (str));});} $ (function () {// tengo cuatro aquí, entonces, Changelength ($ ('#text_txt1'), $ ('#num_txt1')); Changelength ($ ('#text_txt2'), $ ('#num_txt2')); c Hangelength ($ ('#text_txt3'), $ ('#num_txt3')); Changelength ($ ('#text_txt4'), $ ('#num_txt4'));});Por supuesto, el recuento de palabras requerido aquí también se puede encapsular dentro de la función, pero no lo encapsularé. Esto se da cuenta de que al ingresar el texto, las palabras restantes se mostrarán automáticamente dentro del tramo. Cuando el valor de entrada alcanza el valor más alto, las palabras restantes se mostrarán como 0, y el contenido no se puede llenar en un nuevo contenido. Al eliminar el texto, SPAN puede obtener dinámicamente el recuento de palabras restante.
A continuación se muestran los códigos de otros, y esta vez también he tomado prestados algunos de los métodos de escritura de los demás.
HTML:
<Viv> <p> Introducción: </p> <textarea id = "content" name = "firm" style = "altura: 60px; overflow-y: hidden;" onkeyup = "changelength (this, 60)"> </extarea> <div> <h3> 60 </h3> </div> </div> </div>
JS:
// Verifique la longitud de la función TextAREA ChangeLength (obj, lg) {var len = $ (obj) .val (); $ (obj) .next (). find ("h3"). text (lg-len.length); if (len.length> = lg) {$ (obj) .next (). find ("h3"). text (0); $ (obj) .val (len.sUnstring (0, lg));}}Lo anterior es el método para obtener palabras dinámicas restantes en TextARea basadas en JS introducidas por el editor. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!