Home Web Front-end HTML Tutorial How to obtain the dynamic remaining word count of textarea

How to obtain the dynamic remaining word count of textarea

Jan 23, 2018 am 10:22 AM
textarea dynamic Obtain

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>
Copy after login

js part:

$(function(){   
   $(&#39;#text_txt1&#39;).on(&#39;keyup&#39;,function(){   
       var txtval = $(&#39;#text_txt1&#39;).val().length;   
       console.log(txtval);   
      var str = parseInt(600-txtval);   
      console.log(str);   
        if(str > 0 ){   
          $(&#39;#num_txt1&#39;).html(&#39;剩余可输入&#39;+str+&#39;字&#39;);   
      }else{   
          $(&#39;#num_txt1&#39;).html(&#39;剩余可输入0字&#39;);   
          $(&#39;#text_txt1&#39;).val($(&#39;#text_txt1&#39;).val().substring(0,600)); //这里意思是当里面的文字小于等于0的时候,那么字数不能再增加,只能是600个字   
        }   
        //console.log($(&#39;#num_txt&#39;).html(str));   
    });   
})
Copy after login

Then introduce multiple textarea implementation cases on the same page

function changeLength(obj,num){   
    obj.on(&#39;keyup&#39;,function(){   
    var txtval = obj.val().length;   
        //console.log(txtval);   
        var str = parseInt(600-txtval);   
        //console.log(str);   
        if(str > 0 ){   
            num.html(&#39;剩余可输入&#39;+str+&#39;字&#39;);   
        }else {   
            num.html(&#39;剩余可输入0字&#39;);   
            obj.val(obj.val().substring(0, 600));   
        }   
        //console.log($(&#39;#num_txt&#39;).html(str));   
    });   
}   
$(function(){ //我这里有四个,所以调用4次   
    changeLength($(&#39;#text_txt1&#39;),$(&#39;#num_txt1&#39;));   
    changeLength($(&#39;#text_txt2&#39;),$(&#39;#num_txt2&#39;));   
    changeLength($(&#39;#text_txt3&#39;),$(&#39;#num_txt3&#39;));   
    changeLength($(&#39;#text_txt4&#39;),$(&#39;#num_txt4&#39;));   
});
Copy after login

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>
Copy after login

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));   
    }   
}
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Convert VirtualBox fixed disk to dynamic disk and vice versa Convert VirtualBox fixed disk to dynamic disk and vice versa Mar 25, 2024 am 09:36 AM

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

How to get file extension in Python? How to get file extension in Python? Sep 08, 2023 pm 01:53 PM

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.

How to convert dynamic disk to basic disk on Windows 11 How to convert dynamic disk to basic disk on Windows 11 Sep 23, 2023 pm 11:33 PM

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

Where to get Google security code Where to get Google security code Mar 30, 2024 am 11:11 AM

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.

How to get the last element of LinkedHashSet in Java? How to get the last element of LinkedHashSet in Java? Aug 27, 2023 pm 08:45 PM

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 create a dynamic image carousel using HTML, CSS and jQuery How to create a dynamic image carousel using HTML, CSS and jQuery Oct 25, 2023 am 10:09 AM

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

Get the latest updates now: Fix missing latest updates Get the latest updates now: Fix missing latest updates Nov 08, 2023 pm 02:25 PM

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

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

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

See all articles