Javascript_input, textArea displays the remaining input words in real time

Real-time display of the remaining number of words that can be entered Effects, letters, numbers, and Chinese are all counted as one

Directory

• Directory

• Real-time display of the remaining number of words that can be entered

• Effect

• Code

• Quick link

---

Real-time display of the remaining number of words that can be entered

Effect

Code

html part

    <h2>实时显示剩余可输入的字数（字母，数字，中文都算一个字）</h2>
    <h>昵称:</h>
    <input type="text" id="myText" maxlength="15" onKeyUp="keypress1()"/>
    <label id="name">15</label><span>/</span><label>15</label>
    <br>
    <h>评论内容:</h><br>
    <textarea id="myArea" style="width: 100px;" cols="10"   rows="3" onKeyUp="keypress2()" onblur="keypress2()"></textarea>
    <label id="pinglun">30</label><span>/</span><label>30</label>

js part

function keypress1(){
    var text1=document.getElementById("myText").value;
    var maxLen=document.getElementById("myText").maxLength;
    var len=maxLen-text1.length;
    document.getElementById("name").innerText=len;}
function keypress2(){
    var text1=document.getElementById("myArea").value;
    var maxLen=document.getElementById("myArea").cols*document.getElementById("myArea").rows;
    var len;//记录剩余字符串的长度
    if(text1.length>=maxLen)
    {
        document.getElementById("myArea").value=text1.substr(0,maxLen);//只显示起始位-末尾；substr（起始位，末尾)
        len=0;
    }else{
        len=maxLen-text1.length;
    }
    document.getElementById("pinglun").innerText=len;}

Related articles:

javascript TextArea dynamically displays remaining characters_form special effects

How to achieve acquisition The dynamic number of remaining words in textarea

JS method to determine the number of words remaining in the text box

The above is the detailed content of Javascript_input, textArea displays the remaining input words in real time. For more information, please follow other related articles on the PHP Chinese website!