html移动端输入框,移动端页面 输入框怎么实现这种效果??

刚入前端时候写的，我把代码复制改了下，没样式，你自己加上去。

xxx

*{

margin: 0;

padding: 0;

}

.container{

position: fixed;

left: 0;

bottom: 0;

width: 100%;

height: 64px;

max-height: 300px;

border-top: 1px solid #ddd;

}

.icon1{

width: 64px;

height: 64px;

line-height: 60px;

position: absolute;

left: 0;

bottom: 0;

text-align: center;

}

.icon2{

width: 64px;

height: 64px;

line-height: 60px;

position: absolute;

right: 0;

bottom: 0;

text-align: center;

}

.wrapper{

height: 100%;

padding: 2px 64px;

position: relative;

}

.textarea{

width: 100%;

height: 30px;

line-height: 30px;

max-height: 300px;

font-size: 18px;

resize: none;

border: 1px solid #ddd;

margin-top: 18px;

}

Icon1

Icon2

var areaHeight = $('#textarea').height()

$('#textarea').on('input propertychange',function(){

if(areaHeight > 200) {

return

}

var nowHeight = $(this).attr("scrollHeight")

if(nowHeight !== areaHeight){

$(this).css('height', nowHeight)

$('.container').css('height', $('.container').height() + nowHeight - areaHeight)

areaHeight = nowHeight

}

})