Home > Web Front-end > JS Tutorial > Javascript_input, textArea displays the remaining input words in real time

Javascript_input, textArea displays the remaining input words in real time

php是最好的语言
Release: 2018-08-03 09:42:40
Original
2788 people have browsed it

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

Javascript_input, textArea displays the remaining input words in real time

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

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

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!

source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template