轩枫阁

首页 / Web前端 / CSS / textarea如何实现高度自适应?

textarea如何实现高度自适应?

今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框。然后当时就想这个交互该怎么实现比较好,然后想起了新浪微博的做法:点击评论,默认显示一行,当输入的文字超过一行或者输入Enter时,输入框的高度会随着改变,直到输入完毕。顿时觉得这个细节做得挺不错的,可以效仿下。下面分享2种实现textarea高度自适应的做法,一种是用div来模拟textarea来实现的,用CSS控制样式,不用JS;另一种是利用JS控制的(因为存在浏览器兼容问题,所以写起来比较麻烦);

方法一:div模拟textarea文本域轻松实现高度自适应

demo演示地址:http://www.xuanfengge.com/demo/201308/textarea/demo1.html

因为textarea不支持自适应高度,就是定好高度或者是行数之后,超出部分就会显示滚动条,看起来不美观。

而用DIV来模拟时,首先遇到的问题是:div怎么实现输入功能?

可能我们还是第一次见到这个属性contenteditable,如一个普通的block元素上加个contenteditable="true"就实现编辑,出现光标了。如

contenteditable属性虽是HTML5里面的内容,但是IE似乎老早就支持此标签属性了。所以,兼容性方面还是不用太担心的。

CSS代码

 HTML代码

CSS代码中,因为IE6不支持min/max,所以做了hack,其他的也好理解。

 

方法二:文本框textarea根据输入内容自适应高度

demo演示地址:http://www.xuanfengge.com/demo/201308/textarea/demo2.html

这个写法是用原生JS写的,考虑了很多兼容性问题,完全和新浪微博的回复效果一样的功能。有兴趣的童鞋可以仔细分析下代码。

CSS代码

javascript代码

HTML代码(写在body里面的)

 其他方法

本文标题:textarea如何实现高度自适应? - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,欢迎打赏
赞  赏
赞赏作者 urnotivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
326/470
328/470

相关阅读

文章评论

  • 你好,我按照上述方法二:文本框textarea根据输入内容自适应高度,只能增加,删除高度不变,鼠标也不能上下移动

  • 阿萨德第三方大

  • 有个小问题,增加了max-height后,文字内容超过最大高度后,没有显式滚动条,鼠标上下滚动时也不生效,有人能解决吗?

  • [面抽]

  • 加油啊!!!!顶哦!!!!!

  • 又搜到你博客了…

    • 啊哈哈哈哈

  • 要设置最大高度怎么设置呢

  • 输入框是什么时候判断应该缩小的呢?

  • 亲,有一个地方一直没看懂。就是它是检测它什么时候应该缩小呢?

  • elem.currHeight 这个是元素的属性吗?没明白

    • 额….这个应该是兼容的属性,返回的是当前元素的高度

      • google 了一下 currHeight ,没找着这个的文档,w3c 官网 css草案里面貌似也没有这个属性。
        如果是兼容的属性,请问是哪个浏览器下特有的属性呢?

        • 我测试了下,IE6-9,chrome都支持这个属性,我以前也没用过,跟style.height差不多,获得的值就少了px,只获得数值

          • 刚试了下 chrome 下是有,原来在 ff 下没有的

          • 我好久不看FF了 – –

          • 我又错了,原本本身是没有 currHeight 属性的,

            elem.currHeight = parseInt(style.height);

            是这里进行了设置。。。。。。。

          • OK,偶也晓得了,之前没看到这个 scrollTop += parseInt(style.height) – elem.currHeight;,傻了 →_→

          • 爱迪生萨达大第三方

          • sd sa asd

  • 因为输入框高度过高的时候,输入框的垂直高度会超出屏幕,此时再换行时,既要输入框高度增加,同时也要光标位置根据浏览器位置固定。所以scrollTop是用来控制光标不移动的

  • 果然很强大啊。。。。

  • 学习了,你的主题真不错,不愧是搞前端的

    • 原谅我这么久才回复,当时还在实习中,没太注意评论,一起努力

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子