jQuery实现还能输入N字符

简介:

页面:

<table cellpadding="0" cellspacing="0" border="0" width="100%">
                        <tr>
                            <td>
                                <textarea name="" id="doc" cols="30" rows="10"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="face">
                                    <img src="/sitecn/images/face.jpg" /></div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                还能输入<span id="count"></span>字
                                <input type="button" class="btn" value="提 交" />
                            </td>
                        </tr>
                    </table>

JQuery:

<script type="text/javascript">
    var maxCount = 200;  // 最高字数,这个值可以自己配置

    $("#doc").keyup(function () {
        var len = getStrLength(this.value);
        var lenCount = maxCount - len; //计算还可以输入多少个
        if (lenCount <0) {
            $(this).val($(this).val().substring(0, 200));
        }
        else {

            $("#count").html(lenCount);
        }
    })

    // 中文字符判断 

    function getStrLength(str) {

        var len = str.length;

        var reLen = 0;

        for (var i = 0; i < len; i++) {

            if (str.charCodeAt(i) < 27 || str.charCodeAt(i) > 126) {

                // 全角     

                reLen += 2;

            } else {
                reLen++;
            }
        }

        return reLen;

    } 
</script>

本文转自程序猿博客51CTO博客,原文链接http://blog.51cto.com/haihuiwei/1589960如需转载请自行联系原作者


365850153

相关文章
|
JavaScript 前端开发 CDN
HTML + jQuery 实现轮播图
HTML + jQuery 实现轮播图
487 0
HTML + jQuery 实现轮播图
|
JavaScript
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
678 0
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
|
前端开发 JavaScript
【jquery ajax】实现文件上传提交
【jquery ajax】实现文件上传提交
394 0
【jquery ajax】实现文件上传提交
|
JavaScript
利用jquery的attr方法一行代码实现的简单的图片切换效果
利用jquery的attr方法一行代码实现的简单的图片切换效果
231 0
利用jquery的attr方法一行代码实现的简单的图片切换效果
|
JavaScript
jquery实现单击div切换背景,再次单击回到原来样式
jquery实现单击div切换背景,再次单击回到原来样式
320 0
jquery实现单击div切换背景,再次单击回到原来样式
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
192 0
jQuery实现判断li的个数从而实现其他功能
|
JavaScript 搜索推荐 API
JQuery+ajax实现类似百度搜索自动匹配功能
JQuery+ajax实现类似百度搜索自动匹配功能
501 0
JQuery+ajax实现类似百度搜索自动匹配功能
|
缓存 JavaScript 前端开发
JavaScript、jQuery实现“社区便利店收银系统”
随着个性化服务发展,学校、街边、社区等都流行将水果等商品洗净、切好,并装盒,按份出售。现开发一个“社区便利店收银系统”,店中每天提供固定种类的水果,装盒后,标记每一份价格,按份进行销售。在系统中,打开收银网页(casher.html),点击“+”添加销售水果,点击“结账”进行购买水果结算,点击“完成交易”进行下一个新用户购买。
JavaScript、jQuery实现“社区便利店收银系统”
|
JavaScript 前端开发
jQuery实现表格行的删除和增加
使用jQuery实现对表格元素行的删除和增加效果
jQuery实现表格行的删除和增加
|
JavaScript 前端开发
jQuery实现瀑布流布局
(waterfall) 瀑布流布局是一种流行的网页布局方式,是指元素在页面的布局中像瀑布一样从上到下布局,即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。
jQuery实现瀑布流布局