html div 变化,html中用div代替textarea实现输入框高度随输入内容变化

项目中的需求:留言栏输入高度变化，超过1行时，自动伸展，超过4行后，不再伸展。主要思想是利用最小高度和最大高度，再加上overflow来实现，到了最大高度，文字不会溢出而是隐藏。根据文本框中字体的大小，高度需要适当调整。

代码：

#leave-message-textarea{

width: 100%;

min-height:20px;

max-height:70px;

outline:;

border: 1px solid #000;

font-size: 13px;

overflow-x: hidden;

overflow-y: auto;

-webkit-user-modify: read-write-plaintext-only;

}

其中div的placeholder效果用data-text属性来实现，css代码如下：

[contentEditable=true]:empty:not(:focus):before{

content:attr(data-text);

}

[iOS] 输入框高度随输入内容变化

一般,类似聊天软件的输入框默认都是显示一行的,在用户输入过程中根据输入文字的内容来改变输入框的高度,以便显示全部文字.像微信,QQ的输入框就是这样的.那么这个效果应该怎么实现呢? 新博客:wosson ...

div模拟textarea以实现高度自适应实例页面

作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...

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

1 2 3

4