How to obtain the dynamic remaining word count of textarea
This time I will show you how to obtain the dynamic remaining word count of textarea, and what are the precautions for obtaining the dynamic remaining word count of textarea. The following is a practical case, let's take a look.
I encountered a case at work that I have never written about before. I spent half an afternoon trying to write it out. It feels so gray but also feels a sense of accomplishment! Of course, this is nothing to a js expert, but it is a small step forward for my own js ability.
Case introduction: We often see that some websites have textarea text boxes. When you enter, there is a text prompt below how many words you can enter. Today we are going to implement this function. Of course, since a page has several textareas, it is not possible to use a single js logic for control, and it must be encapsulated in a small way. Of course, there are still some flaws in my package, but the basic functions are achieved.
First introduce a single textarea implementation case
html part:
<textarea id="text_txt1"></textarea> <span id ="num_txt1">剩余可输入600字</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('剩余可输入'+str+'字'); }else{ $('#num_txt1').html('剩余可输入0字'); $('#text_txt1').val($('#text_txt1').val().substring(0,600)); //这里意思是当里面的文字小于等于0的时候,那么字数不能再增加,只能是600个字 } //console.log($('#num_txt').html(str)); }); })
Then introduce multiple textarea implementation cases on 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('剩余可输入'+str+'字'); }else { num.html('剩余可输入0字'); obj.val(obj.val().substring(0, 600)); } //console.log($('#num_txt').html(str)); }); } $(function(){ //我这里有四个,所以调用4次 changeLength($('#text_txt1'),$('#num_txt1')); changeLength($('#text_txt2'),$('#num_txt2')); changeLength($('#text_txt3'),$('#num_txt3')); changeLength($('#text_txt4'),$('#num_txt4')); });
Of course, the actual number of words required here can also be encapsulated inside the function, but I will not encapsulate it. In this way, when text is entered, the remaining word count will be automatically displayed inside the span. When the input value reaches the maximum value, the remaining word count will be displayed as 0, and new content cannot be filled in. When deletes text, span can dynamically obtain the remaining number of words.
The following is other people’s code. This time I also borrowed some other people’s writing methods
html:
<div class="family_v2"> <p class="nickname_v2">简介:</p> <textarea id="content" name="sign" style="height:60px;overflow-y: hidden;" onkeyup="changeLength(this,60)" class="nicknameBox_v2 brief_box_v2"> </textarea> <div class="limit_num_v2"> <h3>60</h3> </div> </div>
js:
//验证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)); } }
I believe that I have seen these cases. You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
Basic knowledge of HTML. Detailed introduction to css style sheets and style attributes
of HTML Introduction to common usage of meta tag
The href attribute of HTMLa tag specifies relative path and absolute path usage
The above is the detailed content of How to obtain the dynamic remaining word count of textarea. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

When creating a virtual machine, you will be asked to select a disk type, you can select fixed disk or dynamic disk. What if you choose fixed disks and later realize you need dynamic disks, or vice versa? Good! You can convert one to the other. In this post, we will see how to convert VirtualBox fixed disk to dynamic disk and vice versa. A dynamic disk is a virtual hard disk that initially has a small size and grows in size as you store data in the virtual machine. Dynamic disks are very efficient at saving storage space because they only take up as much host storage space as needed. However, as disk capacity expands, your computer's performance may be slightly affected. Fixed disks and dynamic disks are commonly used in virtual machines

A file extension in Python is a suffix appended to the end of a file name to indicate the format or type of the file. It usually consists of three or four characters, a file name followed by a period, such as ".txt" or ".py". Operating systems and programs use file extensions to determine what type of file it is and how it should be processed. Recognized as a plain text file. File extensions in Python are crucial when reading or writing files because it establishes the file format and the best way to read and write data. For example, the ".csv" file extension is the extension used when reading CSV files, and the csv module is used to process the files. Algorithm for obtaining file extension in Python. Manipulate file name string in Python.

If you want to convert a dynamic disk to a basic disk in Windows 11, you should create a backup first as the process will erase all data in it. Why should you convert dynamic disk to basic disk in Windows 11? According to Microsoft, dynamic disks have been deprecated from Windows and their use is no longer recommended. Additionally, Windows Home Edition does not support dynamic disks, so you will not be able to access these logical drives. If you want to combine more disks into a larger volume, it is recommended to use Basic Disks or Storage Spaces. In this article, we will show you how to convert dynamic disk to basic disk on Windows 11 How to convert dynamic disk to basic disk in Windows 11? In the beginning

Google Authenticator is a tool used to protect the security of user accounts, and its key is important information used to generate dynamic verification codes. If you forget the key of Google Authenticator and can only verify it through the security code, then the editor of this website will bring you a detailed introduction on where to get the Google security code. I hope it can help you. If you want to know more Users please continue reading below! First open the phone settings and enter the settings page. Scroll down the page and find Google. Go to the Google page and click on Google Account. Enter the account page and click View under the verification code. Enter your password or use your fingerprint to verify your identity. Obtain a Google security code and use the security code to verify your Google identity.

Retrieving the last element from a LinkedHashSet in Java means retrieving the last element in its collection. Although Java has no built-in method to help retrieve the last item in LinkedHashSets, there are several effective techniques that provide flexibility and convenience to efficiently retrieve this last element without breaking the insertion order - a must for Java developers issues effectively addressed in its application. By effectively applying these strategies in their software projects, they can achieve the best solution for this requirement LinkedHashSetLinkedHashSet is an efficient data structure in Java that combines HashSet and

How to use HTML, CSS and jQuery to create a dynamic image carousel. In website design and development, image carousel is a frequently used function for displaying multiple images or advertising banners. Through the combination of HTML, CSS and jQuery, we can achieve a dynamic image carousel effect, adding vitality and appeal to the website. This article will introduce how to use HTML, CSS and jQuery to create a simple dynamic image carousel, and provide specific code examples. Step 1: Set up HTML junction

If the "Get the latest updates as soon as they become available" option is missing or grayed out, you may be running a Developer Channel Windows 11 build, and this is normal. For others, issues arise after installing the KB5026446 (22621.1778) update. Here's what you can do to get back the "Get the latest updates as soon as they become available" option. How do I get the "Get the latest updates as soon as they're available" option back? Before starting any of the solutions below, make sure to check for the latest Windows 11 updates and install them. 1. Use ViVeTool to go to the Microsoft Update Catalog page and look for the KB5026446 update. Download and reinstall the update on your PC

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
