`
highfly-s
  • 浏览: 96614 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

动态显示文本框输入的字数

显示文本框字的数量区分中英文 
阅读更多

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title</title>
    <script type="text/javascript">
    window.onload = function(){
        var oH2 = document.getElementsByTagName('h2')[0];
        var oTextarea = document.getElementsByTagName('textarea')[0];
        var oButton = document.getElementsByTagName('button')[0];
        var aRadio = document.getElementsByName('radio');
        function Fallback(){
            oTextarea.value != '' ? oButton.className = 'button' : oButton.className = 'button1';
            if(aRadio[0].checked == true){
                if(WordLength(oTextarea) > 140){
                    sum = 0;
                    for(i=0;i<oTextarea.value.length;i++){
                        sum += LimitLength(oTextarea.value.substr(i,1));
                        if(sum > 140)oTextarea.value = oTextarea.value.substr(0,i);
                    }
                }
                Limit(oTextarea,140,oH2);
            }else{
                Limit(oTextarea,140,oH2);
            }
        }
        oTextarea.onkeyup = Fallback;
        oButton.onclick = function(){this.className=='button1' ? Error(oTextarea) : (font_count < 0 ? Error(oTextarea) : alert('发布成功！'));};
        oTextarea.oncontextmenu = function(){return false;};
    }

    function LimitLength(obj){
        var iLen = obj;
        var iLimitLength = 0;
        var iLimitLength = iLen.match(/[^ -~]/g) == null ? iLen.length : iLen.length + iLen.match(/[^ -~]/g).length;
        return iLimitLength;
    }
    function WordLength(obj){
        var oVal = obj.value;
        var oValLength = 0;
        oVal.replace(/\n*\s*/,'')=='' ? oValLength = 0 : oValLength = oVal.match(/[^ -~]/g) == null ? oVal.length : oVal.length + oVal.match(/[^ -~]/g).length;
        return oValLength
    }
    function Limit(obj,iNow,tit){
        var oValLength = WordLength(obj);
        font_count = Math.floor((iNow-oValLength)/2); 
        if(font_count>=0){
            tit.innerHTML = "请文明发言，还可以输入<span>"+font_count+"</span>字";
            return true;
        }else{
            tit.innerHTML = "已超出<span style='color:red'>"+Math.abs(font_count)+"</span>字";
            return false;
        }
        return font_count
    }
    function Error(obj){
        var oTimer = null;
        var i=0;
        oTimer = setInterval(function(){
            i++;
            i==5 ? clearInterval(oTimer) : (i%2==0 ? obj.style.backgroundColor = '' : obj.style.backgroundColor = '#ffd4d4');
        },100);
    }
    </script>
    </head>

    <body>
    <div class="box">
        <h2>请文明发言，还可以输入<span>70</span>字</h2>
        <label><textarea></textarea></label>
        <div class="btn">
            <div class="sel">
                <input type="radio" name="radio" checked="checked"><label>文字自动回退</label><input type="radio" name="radio"><label>数字提醒超出</label>
            </div>
            <button class="button1"></button>
        </div>
    </div>
    </body>
    </html>

分享到：
| 解决在DIV中文字自动下排的问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML5文本框输入字数限制提示特效

    这是一款美观又实用的HTML5文本框输入字数限制提示特效，当input文本框文字超过限制字符时，输入框抖动动画提示，并不可再输入更多文字。

    jQuery textarea文本框输入文字字数限制提示代码.zip

    //显示限制输入字符method function textAreaChange(obj){ var $this = $(obj); var count_total = $this.next().children('span').text(); var count_input = $this.next().children('em'); var area_...

    动态显示输入文字字数

    文件、文件夹加密后，双击它，会弹出密码输入对话框，只有输入正确的密码才能打开该文件。使用完毕退出以后，它自动恢复到加密状态，无需再加密。把文件夹和文件直接加密成Exe可执行文件。你可以将重要的数据以这种...

    JavaScript实现统计文本框Textarea字数增强用户体验

    现在流行的Twitter等微博客网站，有一个很好的用户体验，就是在文本框中输入文字的时候，会自动统计输入的字符，并显示用户还能输入的字符，在限制了140个字的微博客中，这样的小提示可以很好的增强用户体验。...

    输入框 文本域 字数限制

    自己做的文本框字数统计/限制插件 输入框 或者 文本域 动态显示还剩余可输入字数

    如何实现textarea中获取动态剩余字数的方法

    案例介绍：我们常见到有的网站有textarea文本框，当你输入的时候，下面有文字提示还能输入多少个字，今天就是要实现这个功能。当然，由于一个页面有好几个textarea，所以使用单个js逻辑进行控制是不行的，得小小的...

    《程序天下：JavaScript实例自学手册》光盘源码

    13.28 状态栏动态显示时间 13.29 页面访问时间限制 13.30 显示英文上、下午的时间 13.31 用JavaScript制作的特色时钟 13.32 自定义的日历 13.33 生日提醒器 13.34 时间的倒影 13.35 使用正则表达式验证日期 13.36 ...

    程序天下:JavaScript实例自学手册

    13.28 状态栏动态显示时间 13.29 页面访问时间限制 13.30 显示英文上、下午的时间 13.31 用JavaScript制作的特色时钟 13.32 自定义的日历 13.33 生日提醒器 13.34 时间的倒影 13.35 使用正则表达式验证日期 13.36 ...

    超实用的jQuery代码段

    1.21 实现类Twitter的字数限制效果 1.22 提示文本的隐藏与显示 1.23 实现文字闪烁效果 1.24 实现文字动画效果 1.25 实现文字跟随鼠标移动变化的动画效果 1.26 文本域中光标的定位 1.27 实现可折叠效果 1.28 文本框...

    C#编程经验技巧宝典

    102 &lt;br&gt;0162　如何实现C#中用键完成TAB的功能　102 &lt;br&gt;0163　如何限制文本框密码输入长度　102 &lt;br&gt;0164　数据输入为空提示　103 &lt;br&gt;0165　如何设置文本框光标到末尾　103 &lt;br&gt;0166　输入法调整...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    2.jQuery字符插件之适合留言板的jquery文本框输入字符限制插件下载 3.jquery实现Tooltip提示(文字、链接、地图锚点),自带5种不同样式 4.jQuery实现支付宝隐藏层提示信息内容的功能 5.jquery实现鼠标划过网址...

    中文版Excel.2007高级VBA编程宝典.part1

    字数：1294000 页码：872 编辑推荐 -------------------------------------------------------------------------------- “电子表格先生”潜心力作，世界级Excel畅销书。 　“千锤百炼”的Excel畅销书 　没有人比...

    70款经典Dreamweaver插件

    calendarPopup 一个弹出日历表格，用以确保输入的日历是按照特定的格式进行输入的，主要特色包括：日历链接，按照需要的方式设定日历的格式，按照需要可以在日期项目间增加分隔符等等功能 MX95982_shortcutIconOB_v1...

    Dreamweaver 插件集

    一个弹出日历表格，用以确保输入的日历是按照特定的格式进行输入的，主要特色包括：日历链接，按照需要的方式设定日历的格式，按照需要可以在日期项目间增加分隔符等等功能 MX95982_shortcutIconOB_v1 插入.icon图标...

    《javaScrip开发技术大全》源代码

    第2章（\代码\第02章） • sample01.htm 将JavaScript代码插入在标签与标签之间 • sample02.htm 将JavaScript代码放在了标签与标签之间 • sample03.htm JavaScript与HTML混合执行 ...

Magicbox
Global site tag (gtag.js) - Google Analytics