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

最新推荐文章于 2024-05-07 19:36:34 发布

front_end_fan

最新推荐文章于 2024-05-07 19:36:34 发布

阅读量3.2k

点赞数 1

文章标签： textarea 高度自适应

本文链接：https://blog.csdn.net/qq_39198420/article/details/76242337

版权

textarea 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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();
  }
}

front_end_fan

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
div实现高度自适应并限制输入字数

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>collap
复制链接

扫一扫