HTML textarea控件行数限制

一、设置控件行高与高度一致

<textarea id="data" data-val="" style="resize: none; width: 100px; height: 20px; line-height: 20px; word-break: break-all;"
     onkeyup="test(this)"></textarea>

二、控件高度自动增加

jQuery.fn.extend({
                autoHeight : function() {
                    return this.each(function() {
                        var $this = jQuery(this);
                        if (!$this.attr('_initAdjustHeight')) {
                            $this.attr('_initAdjustHeight', $this.outerHeight());
                        }
                        _adjustH(this).on('input', function() {
                            _adjustH(this);
                        });
                        _adjustH(this).on('keyup', function() {
                            _adjustH(this);
                        });
                    });

                    function _adjustH(elem) {
                        var $obj = jQuery(elem);
                        return $obj.css({
                            height : $obj.attr('_initAdjustHeight'),
                            'overflow-y' : 'hidden'
                        })
                        .height(elem.scrollHeight);
                    }
                }
            });

            $(function() {
                $('#data').autoHeight();

            });

三、计算行数

function test(obj) {
                console.log(Math.floor($(obj).height() / 20));
            }

四、控制输入

function test(obj) {
                var lineCount = Math.floor($(obj).height() / 20);
                console.log("行数:" + lineCount);
                //console.log("字数:" + $(obj).val().length);
                
                if (lineCount > 1) {
                    $(obj).val($(obj).data("val"));
                } else {
                    $(obj).data("val", $(obj).val());
                }
            }

发表评论