HTML textarea控件行数限制

HTML5, Web设计 / 作者： / / 发表评论 / JavaScript, JS, textarea, 行数

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

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

二、控件高度自动增加

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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();
 
            });

三、计算行数

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

四、控制输入

01
02
03
04
05
06
07
08
09
10
11
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());
                }
            }
打赏微海报分享

相关文章

发表评论

欢迎阅读『HTML textarea控件行数限制|HTML5、Web设计|Nick Tan-梓潼Blog』