• textarea如何实现高度自适应?


     

    转自:http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html

    今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框。然后当时就想这个交互该怎么实现比较好,然后想起了新浪微博的做法:点击评论,默认显示一行,当输入的文字超过一行或者输入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里面的)

  • 相关阅读:
    数组
    循环(二)
    循环——笔记
    C#基础(四)
    C#基础(三)
    安卓帮助文档
    增加线程异步发送消息的方法二(Runnable)
    增加线程异步发送消息的方法一(Thread)
    获取下拉框的值
    获取表中字段最大值,并且保存在前台页面中
  • 原文地址:https://www.cnblogs.com/jiafeimao-dabai/p/7454549.html
Copyright © 2020-2023  润新知