项目中的需求:留言栏输入高度变化,超过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