作为多行文本域功能来讲，textarea满足了我们大部分的需求。然而，textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应。textarea总是很自信地显摆它的滚动条，高度固执地岿然不动。所以，有时候，为了增加交互体验想让文本域高度自适应的时候，就会遇到麻烦。

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <title>div模拟textarea以实现高度自适应实例页面</title>
    <style type="text/css">
    .test_box {
        width: 400px;
        min-height: 120px;
        max-height: 300px;
        _height: 120px;
        margin-left: auto;
        margin-right: auto;
        padding: 3px;
        outline: 0;
        border: 1px solid #a0b3d6;
        font-size: 12px;
        word-wrap: break-word;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-user-modify: read-write-plaintext-only;
    }
    </style>
</head>
<body>
    <h3 style="text-align:center;margin:20px 0 20px 0">div模拟textarea以实现高度自适应实例页面</h3>
    <div class="test_box" contenteditable="true"><br /></div>
</body>

<script type="text/javascript">
if (typeof document.webkitHidden == "undefined") {
    // 非chrome浏览器阻止粘贴
    box.onpaste = function() {
        return false;
    }
}
</script>
</html>

div模拟textarea以实现高度自适应实例页面的更多相关文章

  1. 用一个div模拟textarea并实现高度自适应

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  2. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

  3. div模拟textarea

    有些Weber可能没有用过contenteditable这个属性,如果想编辑一个DIV里面的内容,这个属性是一个非常不错的选择   <div contenteditable="true ...

  4. div模拟textarea文本域轻松实现高度自适应

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. div模拟textarea自适应高度

    之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...

  6. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...

  7. H5新增属性contenteditable（不用JS，实现div模拟textarea高度自增长）

    无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...

  8. textarea如何实现高度自适应？

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

  9. textarea如何实现高度自适应（一）

    转自轩枫阁 - http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 方法一:div模 ...

随机推荐

  1. C++程序设计实践指导1.7超长数列中n个数排序改写要求实现

    改写要求1:将以上程序改写为适合超长整数 改写要求2:将以上程序改写为适合超长数列 改写要求3:将数列中指定位置m开始的n个结点重新按降序排序 改写要求4:输出指定位置m开始的n个结点的超长整数 #i ...

  2. 不同css样式适应不同屏幕大小实现自适应宽度

    @media screen and (判断属性){ CSS样式选择器 } 例如: <div class="silder_photo"></div> < ...

  3. IE8的项目在IE11下 一些功能无法实现的解决方案

    最近改了一些IE11下一些功能无法实现的项目,发现了有一些IE8下的方法 ,在IE11下被取消或者替代了,如下: 1.JavaScript 运行时错误: 对象不支持“attachEvent”属性或方法 ...

  4. JS delete 用法(删除对象属性及变量)

    1,对象属性删除 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);//mm delete ...

  5. php 邮件类

    编写一个用php socket 发送邮件的类,简单好用,当用到php程序发送邮件时, 而在163服务器中,可以在RCPT命令中还可以验证163邮箱是否存在,还有很多用处, 我现在暂时还没想到. 记录下 ...

  6. Nginx 变量漫谈（三）

    也有一些内建变量是支持改写的,其中一个例子是 $args. 这个变量在读取时返回当前请求的 URL 参数串(即请求 URL 中问号后面的部分,如果有的话 ),而在赋值时可以直接修改参数串.我们来看一个 ...

  7. 解决CentOS(RedHat)中sendmail和sm-client启动慢故障(转)

    Starting sendmail: Starting sm-client: 刚才发了修改主机名那篇文章后,我意外发现重新启动CentOS的时候系统会卡在sendmail和sm-client那里将近3 ...

  8. ssh伪登陆执行远程主机脚本命令 C程序基于ssh passwordless执行远程主机命令及基于配置文件的验证伪登陆执行命令

    1,基于有密码及免秘钥在远程主机上执行命令及脚本 ssh -T ip "CLI or shell.sh"; 2,C程序实现上述功能--基于password-less

  9. [分享]源代码&开发手记：SAE应用“车百科” (Python + SAE + Bottle + Bootstrap) - Bottle - Python4cn(news, jobs)

    [分享]源代码&开发手记:SAE应用"车百科" (Python + SAE + Bottle + Bootstrap) - Bottle - Python4cn(news, ...

  10. Java导出excel并下载功能

    我们使用的导出并下载功能是利用一个插件叫POI的插件提供的导出功能,很实用:首先先导入Jar包: Jar包下载地址:http://poi.apache.org/   官方文档地址:http://poi ...