div实现高度自适应并限制输入字数

来源：互联网发布：狼雨seo网络工作室编辑：程序博客网时间：2024/06/18 18:55

div模拟textarea实现高度随着内容自适应，并用js限制输入字数

一、jQuery版

<!doctype html><html lang="en"><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>collapsible demo</title>    <style>        .textarea{            float: left;            width:200px;            font-size: 12px;            font-weight: normal;            color: #666;            min-height:20px;            word-wrap:break-word;/*为了在ie和FF顺利换行，加上word-wrap*/            overflow-x:hidden;            overflow-y: auto; /*visible (默认), hidden, scroll, 和auto*/            padding: 5px;            line-height: 20px;            white-space:normal;/*换行*/            outline: 0;        }        div[contenteditable]{border:1px solid #ddd;}    </style><body><div id="info" contenteditable="true" class="textarea">办公室吸顶灯不亮，请速来维修，谢谢！</div><script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript">    $(".textarea").keyup(function () {        var _html = $(this).html();        if(_html.length > 100){            $(this).html(_html.substr(0,100));            $(this).blur();        }    })</script></body></html>

二、原生js版

$ele.onkeyup = function(){  var _html = this.innerHTML;  if(_html.length > 10){    this.innerHTML = _html.substr(0,10);    this.blur();  }}

阅读全文

0 0