div模拟textarea文本域及高度自适应

来源:互联网 发布:淘宝代销图片被投诉 编辑:程序博客网 时间:2024/05/16 17:19

div模拟textarea文本域及高度自适应

大家都知道html中textarea的作用,今天给大家介绍的是让div模拟它的属性;很简单给div加上contenteditable=“true”<div contenteditable=true></div>

  1. 最难的部分已经解决了,下面就是一些修饰了;
    1. <style>
      .test_box {//不要用元素选择器哦!自己可以试试;
      width: 500px;
      min-height: 100px;
      max-height: 400px;
      margin: 0 auto;
      padding: 3px;
      outline: 0;
      border: 1px solid red;
      font-size: 11px;
      word-wrap: break-word;
      overflow: auto;
      }
      </style>
      <div class=test_box contenteditable="true"></div>
  2. 浏览器的兼容,自己看到办吧,(
    【区别符号】:「\9」、「*」、「_」)
    1. #tip{background:blue;/*Firefox背景变蓝色*/ background:red\9;/*IE8背景变红色*/ *background:black;/*IE7背景变黑色*/ _background:orange;/*IE6背景变橘色*/ }
0 0
原创粉丝点击