zoukankan      html  css  js  c++  java
  • div模拟textarea实现高度自增长

    今天看到有人在问能不能实现手机输入框的高度随着文字增多而增长,到手机顶部的时候再增加内容,出现滚动条。

    textarea 的高度是固定的,内容超出就会出现滚动条,使用js控制的话效果不是很理想,所有准备使用div来模拟 textarea,这就要不得不提html5的一个新属性 contenteditable

    <div id="textarea" contenteditable="true"></div>

    contenteditable 顾名思义就是内容可编辑,使用之后div的内容就可以编辑了,为了实现跟 textarea 一样的显示效果,我们只需要对div的样式进行设置一下就行。

    #textarea {
         width:300px;
         border:1px solid #ccc;
         min-height:150px;
         max-height:300px;
         overflow: auto;
         font-size: 14px;
         outline: none; 
    }

    这样就可以了,完美的模拟textarea进行编辑内容,提交的时候,我们只需要获取一下div里面的内容就可以了。

    另外这个方法还可以实现,在div内部改变部分字体的样式,颜色等,是不是很方便。

  • 相关阅读:
    20141124-JS函数
    20141124-JS 变量,数据类型
    20141124-HTML-JavaScrilpt
    ●查询语句
    ●SQL2008基础
    ●数据库入门、更改验证方式
    ●枚举、递归
    ●值类型、引用类型
    小游戏●两人对战
    小游戏●贪吃蛇1(利用二维数组制作)
  • 原文地址:https://www.cnblogs.com/hanb/p/7150481.html
Copyright © 2011-2022 走看看