Rumah > hujung hadapan web > tutorial js > Javascript_input、textArea实时显示剩余可输入的字数

Javascript_input、textArea实时显示剩余可输入的字数

php是最好的语言
Lepaskan: 2018-08-03 09:42:40
asal
2912 orang telah melayarinya

实时显示剩余可输入的字数 效果,字母,数字,中文都算一个

目录

  • 目录

  • 实时显示剩余可输入的字数

    • 效果

    • 代码

  • 快捷链接


实时显示剩余可输入的字数

效果

1.gif

代码

html部分

    <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>
Salin selepas log masuk

js部分

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;}
Salin selepas log masuk

相关文章:

javascript TextArea动态显示剩余字符_表单特效

怎么实现获取textarea的动态剩余字数

js判断文本框剩余可输入字数的方法

Atas ialah kandungan terperinci Javascript_input、textArea实时显示剩余可输入的字数. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan