Case introduction: We often see some websites with textarea text boxes. When you enter, there are text prompts below how many words can you enter. Today is to implement this function. Of course, since a page has several textareas, it is not possible to use a single js logic for control, so it has to be encapsulated in a small way. Of course, my packaging still has some shortcomings, but the basic function is implemented.
First, introduce a single textarea implementation case
html part:
<textarea id="text_txt1"></textarea><span id="num_txt1">The remaining 600 words can be entered</span>
js part:
$(function(){$('#text_txt1').on('keyup',function(){var txtval = $('#text_txt1').val().length;console.log(txtval);var str = parseInt(600-txtval);console.log(str);if(str > 0 ){$('#num_txt1').html('Remaining can enter '+str+'word');}else{$('#num_txt1').html('Remaining can enter 0 words');$('#text_txt1').val($('#text_txt1').val().substring(0,600)); //This means that when the text inside is less than or equal to 0, the number of words cannot be increased, it can only be 600 words}//console.log($('#num_txt').html(str));});})Then introduce multiple textarea implementation cases under the same page
function 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('remainable input '+str+' word');}else {num.html('remainable input 0 words');obj.val(obj.val().substring(0, 600));}//console.log($('#num_txt').html(str));});}$(function(){ //I have four here, so changeLength($('#text_txt1'),$('#num_txt1'));changeLength($('#text_txt2'),$('#num_txt2'));changeLength($('#text_txt3'),$('#num_txt3'));changeLength($('#text_txt4'),$('#num_txt4'));});Of course, the word count required here can also be encapsulated inside the function, but I won't encapsulate it. This realizes that when entering text, the remaining words will be automatically displayed inside the span. When the input value reaches the highest value, the remaining words will be displayed as 0, and the content cannot be filled in new content. When deleting text, span can dynamically obtain the remaining word count.
Below are the codes of others, and this time I have also borrowed some of the writing methods of others
html:
<div><p>Introduction:</p><textarea id="content" name="sign" style="height:60px;overflow-y: hidden;"onkeyup="changeLength(this,60)"></textarea><div><h3>60</h3></div></div>
js:
//Verify the length of textarea function 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.substring(0,lg));}}The above is the method of obtaining dynamic remaining words in textarea based on JS introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!