Введение дела: мы часто видим некоторые веб -сайты с текстовыми полями Textarea. Когда вы входите, ниже текстовые подсказки, сколько слов вы можете ввести. Сегодня реализовать эту функцию. Конечно, поскольку на странице есть несколько текстовых средств, невозможно использовать одну логику JS для управления, поэтому ее необходимо инкапсулировать небольшим образом. Конечно, моя упаковка по -прежнему имеет некоторые недостатки, но основная функция реализована.
Во -первых, представьте один случай реализации Textarea
HTML часть:
<textarea id = "text_txt1"> </textarea> <span id = "num_txt1"> оставшиеся 600 слов можно ввести </span>
JS Часть:
$ (function () {$ ('#text_txt1'). On ('keyup', function () {var txtval = $ ('##text_txt1'). val (). length; console.log (txtval); var str = parseint (600-txtval); console.log (str); Если (str> 0 ) {$ ('#num_txt1'). html ('оставшиеся могут ввести'+str+'word');} else {$ ('#num_txt1'). html ('оставшийся может ввести 0 слов'); $ ('#text_txt1'). val ($ text_txt1 '). чем или равно 0, количество слов не может быть увеличено, оно может быть только 600 слов} // console.log ($ ('#num_txt'). html (str));});})Затем введите несколько случаев реализации Textarea на одной и той же странице
Функция 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); 'rateable'+str str strag '+str str str str str str str str (str); {num.html ('оставшийся ввод 0 слов'); obj.val (obj.val (). substring (0, 600));} // console.log ($ ('#num_txt'). html (str));};} $ (function () {// есть четыре здесь, так что, так что, так что, так changelength ($ ('#text_txt1'), $ ('#num_txt1')); changelength ($ ('#text_txt2'), $ ('#num_txt2')); c Hangelength ($ ('#text_txt3'), $ ('#num_txt3')); changelength ($ ('#text_txt4'), $ ('#num_txt4'));});Конечно, количество слов, необходимое здесь, также может быть инкапсулировано внутри функции, но я не буду инкапсулировать его. Это понимает, что при введении текста оставшиеся слова будут автоматически отображаться внутри пролета. Когда входное значение достигает наивысшего значения, оставшиеся слова будут отображаться как 0, а содержимое не может быть заполнено новым контентом. При удалении текста SPAN может динамически получить оставшееся количество слов.
Ниже приведены коды других, и на этот раз я также позаимствовал некоторые методы написания других
HTML:
<div> <p> Введение: </p> <textarea id = "content" name = "sign" style = "Высота: 60px; overflow-y: hidden;" onkeyup = "changelength (this, 60)"> </textarea> <div> <h3> 60 </h3> </div> </div>
JS:
// Проверьте длину функции текста. $ (obj) .val (); $ (obj) .next (). find ("h3"). Text (lg-len.length); if (len.length> = lg) {$ (obj) .next (). Найти ("h3"). Текст (0);Выше приведено метод получения динамических оставшихся слов в Textarea на основе JS, представленного редактором. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!