textarea实现高度自适应

发表于 | 分类于 ， ， | 阅读次数:

问题背景

自学前端过程中想要模仿windows桌面做个网页版，作为练习。桌面图标改名框刚开始使用input实现，然后发现改名框是可以多行而且根据名称长度自适应高度的，然后考虑使用textarea实现，但是textarea不能自适应高度

解决方案

网上查找资料，总结几种解决方案

  • 1.div模拟textarea文本域轻松实现高度自适应,通过添加contenteditable属性并将属性值设为true

    1
    <div contenteditable="true"></div>

    单击后选中文本的实现：selectNodeContents对具有contenteditable='true'的容器有效

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <div contenteditable='true' id="selectable">http://example.com/page.htm</div>

    <script type="text/javascript">
        var obj = document.getElementById('selectable');
        obj.onclick = function(){
          selectText(this);
        };
        function selectText(obj) {
            if (document.selection) {
                var range = document.body.createTextRange();
                range.moveToElementText(obj);
                range.select();
            } else if (window.getSelection) {
                var range = document.createRange();
                range.selectNodeContents(obj);
                window.getSelection().removeAllRanges();
                window.getSelection().addRange(range);
            }
        }
    </script>

  • 2.文本框textarea根据输入内容自适应高度,js实现

参考：
1.https://www.zhangxinxu.com/wordpress/2010/12/div-textarea-height-auto/
2.https://www.cnblogs.com/dffy/p/6386318.html
3.https://segmentfault.com/q/1010000007857595?_ea=1474484