textarea实现宽度不变高度自适应

代码非原创。原文链接https://www.cnblogs.com/wangjae/p/11150128.html
演示地址：https://xibushijie.github.io/static/textareaHeihgAuto.html


此textarea非彼textarea ，有经验的老司机们应该知道html标签contenteditable这个属性。利用此属性使当前的标签成为可以输入的状态，等同于输入框。<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>textarea输入内容</title><style>#textarea {width: 100px;margin: 0 auto;min-height: 20px;max-height: 100%;outline: 0;border: 1px solid #397EFF;font-size: 13px;overflow-x: hidden;overflow-y: auto;-webkit-user-modify: read-write-plaintext-only;}[contentEditable=true]:empty:not(:focus):before {content: attr(data-text);}</style>
</head><body><div id="textarea" contenteditable="true" data-text="输入内容..."></div>
</body></html>

textarea实现宽度不变高度自适应相关推荐

vue实现textarea框，文字高度自适应
vue实现textarea框,文字高度自适应,https://blog.csdn.net/qq_38128179/article/details/103591717 下面是两种方式,注释掉的是一种,不 ...
css纵向滚动条自适应,纯css实现完美决对居中自动滚动条根据内容宽度、高度自适应,垂直水平居中,自动出现滚动条。.doc...
纯css实现完美决对居中自动滚动条根据内容宽度.高度自适应,垂直水平居中,自动出现滚动条..doc 还剩 3页未读, 继续阅读下载文档到电脑,马上远离加班熬夜! 亲,喜欢就下载吧,价低环保! 内 ...
HTML基础学习之 --网页的宽度、高度自适应
宽高自适应我们在网页布局中经常要定义元素的宽高.但是我们如果定义宽高是一个定数时,当在不同的分辨率的电脑上打开的时候,往往会出现与屏幕不适应的情况,所以我们希望元素大小能根据窗口或子元素自动调整,这 ...
怎么调整html文本域宽度和高度,如何使用CSS设置textarea的宽度和高度？
这是我的css: .editor-field textarea { width : 400; height : 100px; } 这是我的观点的标记: @Html.EditorFor(model =& ...
Ant Design Vue UI组件中改变textarea的宽度和高度
textarea给宽度不能改变.只能改变高.给样式也没效果,只能改变高度.后来发现在form表单中可以改变textarea的宽度. label-col是改变form表单里面的组件距离左边的距离.数值越 ...
微信小程序 image图片组件实现宽度固定高度自适应
添加mode属性 <image class="empty-icon" src="/pages/image/list-emptyx2.png" mode=& ...
CSS 背景图片宽度100% 高度自适应
.bg{width: 100%;height: 100%;background-image: url("../../public/img/bg.png");background-s ...
div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com 本文地址: http://www.zhangxinxu.com/wordpress/?p=1362 一.关于t ...
UITableView根据表格内容进行高度自适应与使用Masonry实现根据内容进行宽度自适应和高度自适应
Masonry和SDAutoLayout不同:SDAutoLayout需要上下左右四个方向都显示性的进行约束,虽然当高度和宽度自适应时,可以少一个高度约束,但是也应有对应布局处理设置.因为标签是有顶部 ...

textarea实现宽度不变高度自适应

textarea实现宽度不变高度自适应

textarea实现宽度不变高度自适应相关推荐

最新文章

热门文章