zoukankan      html  css  js  c++  java
  • 实时计字数提醒的文本框

    那天在一个**论坛上看到一个相当有意思的功能,就是在文本框中输入字符的时候,旁边会提示还可以输入多少个字。
    自己想了一下应该是用JavaScript实现的,今天把它做出来了。原理很简单就是根据文本框触发的onkeyup事件来获得当前文本框字符的长度,然后文本框允许输入的最大字符数来减去当前的字符数,并用label控件显示出来就可以了。

    <html>
    <head>
    <title>enter</title>
    <script language="javascript">
    function keypress1() //text输入长度处理
    {
       var text1=document.getElementById("mytext1").value;
       var len=15-text1.length;
       var show="你还可以输入"+len+"个字";
       document.getElementById("name").innerText=show;
    }
    function keypress2() //textarea输入长度处理
    {
       var text1=document.getElementById("myarea").value;
       var len;//记录剩余字符串的长度
       if(text1.length>=300)//textarea控件不能用maxlength属性,就通过这样显示输入字符数了
       {
        document.getElementById("myarea").value=text1.substr(0,300);
        len=0;
       }
       else
       {
         len=300-text1.length;
       }
       var show="你还可以输入"+len+"个字";
       document.getElementById("pinglun").innerText=show;
    }

    </script>
    </head>
    <body>
    <center>
    <div style="text-align:left;">
    <h>昵称:</h>
    <input type="text" id="mytext1" maxlength=15 onKeyUp="keypress1()"/>
    <font color="gray"><label id="name">你还可以输入15个字</label></font>
    <br>
    <h>评论内容:</h><br>
    <textarea id="myarea" style="height:100px;200px;overflow-x:hidden;overflow-y:hidden"   onKeyUp="keypress2()" onblur="keypress2()"></textarea>
    <font color="gray"><label id="pinglun">你还可以输入300个字</label></font>
    <div>
    </center>


    </body>
    </html>

    运行的界面如下:

  • 相关阅读:
    Python性能鸡汤
    postgreSQL设置自增长字段并插入值
    DBSCAN算法的Java,C++,Python实现
    查看进程及端口使用情况
    软件工程中的各种图
    程序员技术练级攻略[转]
    CSS中 opacity的设置影响了index(层数)的改变
    页面预加载loading动画
    JS 判断用户使用的设备类型
    图片懒加载——介绍
  • 原文地址:https://www.cnblogs.com/zcy_soft/p/1773742.html
Copyright © 2011-2022 走看看