多行文本字数限制

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>弹性textarea</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="../core/css/base_new.css">
</head>
<body>
    <nav></nav>
    <textarea style="width:300px;" placeholder="在这里输入" id="ta"></textarea>
    <p>还能输入<span id="left">200</span>个字符</p>
    <script src='js/zepto.min.js'></script>
    <script src='./js/zepto.flexTextarea.js'></script>
    <script>
        /*
        使用方法
        目前textarea需要指定width,否则会有bug,后续再看是否有更好的解决方案
        $(function(){
            $("#textarea").flexTextarea({
                //字长限制
                maxLength: 120,
                //剩余字长回调
                leftLength: function(value){
                    console.log(value)
                }
            });
        });
         */
        $(function(){
            $('#ta').flexTextarea({
                maxLength: 200,
                leftLength: function(value){
                    $("#left").text(value+'');
                }
            });
        });
    </script>
</body>

</html>



/* 
* @zepto.flexTextarea.js
*/
!(function($,window,undefined){
    var store = [];
    var FlexTextarea = function(options){
        this.chineseAsTwo = options.chineseAsTwo;
        this.callback = options.leftLength || new Function;
        this.maxLength = options.maxLength;
        this.$el = $(options.el);
        this.$el.css('overflow','hidden');
        this.initHeight = this.$el.height();
        if(this.maxLength)
            this.$el.attr('maxlength',this.maxLength);
        this.$dummy = $(document.createElement('pre'));
        this.$dummy.css({
            'white-space': 'pre-wrap',
            'white-space': '-moz-pre-wrap',
            'white-space': '-pre-wrap',
            'white-space': '-o-pre-wrap',
            'word-wrap'  : 'break-word',
            'font-size'  : this.$el.css('font-size'),
            'width'      : this.$el.css('width'),
            'line-height': this.$el.css('line-height'),
            'text-indent': this.$el.css('text-indent'),
            'position'   : 'absolute',
            'z-index'    : '-999',
            'visibility' : 'hidden',
            'top'        : 0,
            'left'       : 0
        });
        $('body').append(this.$dummy);
        var entered = false;
        this.$el.on('input',$.proxy(this.checkHeight,this));
        //init
        this.checkHeight();
    };
    FlexTextarea.prototype.checkHeight = function(){
        var targetLength = this.native2ascii();
        if(this.maxLength)
            var leftLength = this.maxLength - targetLength;
        this.callback(leftLength);
    };
    FlexTextarea.prototype.native2ascii = function(){
        var val = this.$el.val();
        val = val.replace(/\n$/,'\n占位');
        this.$dummy.text(val+'');
        if(this.initHeight <= this.$dummy.height())
            this.$el.height(this.$dummy.height() + "px");
        else
            this.$el.height(this.initHeight + "px");
        var nativecode = val.replace(/[\n]/g,"\s\s").replace(/占位$/,"").split("");
        var len = 0;
        for ( var i = 0; i < nativecode.length; i++)
        {
            var code = Number (nativecode[i].charCodeAt (0));
            if (code > 127 && !!this.chineseAsTwo){
                len += 2;
            }else{
                len++;
            }
        }
        return len;
    };
    $.fn.flexTextarea = function(options){
        return this.each(function(idx,el){
            options.el = el;
            store.push(new FlexTextarea(options));
        });
    };
})($,window);


/*
使用方法
$(function(){
    $("#textarea").flexTextarea({
        //字长限制
        maxLength: 120,
        //剩余字长回调
        leftLength: function(value){
            console.log(value)
        }
    });
});
 */

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值