1、思路由于input框无法实现超出换行,所以要用textarea,然后用一个div标签,添加contenteditable="true"属性,这样div中可以输入内容,并且可以超出换行,也可以把div元素高度顶起来,这样就可以实现自适应的输入框了
2、代码:
html
<form id="box">
<!-- 高度自适应输入框,可用在from表单中 -->
<textarea name="" id="first-input"></textarea>
<!-- 给div添加contenteditable="true"属性 让他变成一个可输入内容的元素 -->
<div contenteditable="true" id="last-input"></div>
</form>
style
#box {
position: relative;
width: 200px;
height: 60px;
margin: 0 auto;
}
#first-input {
padding: 6px;
font-size: 12px;
font-family: '微软雅黑';
width: 100%;
height: 50%;
resize:none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#last-input {
padding: 6px;
font-size: 12px;
font-family: '微软雅黑';
width: 100%;
height: auto;
min-height: 50%;
border: 1px solid;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
script
// 表单输入后给div赋值,使其将自己高度撑起来,然后将高度同步给输入框
$('#first-input').on('input', function(e) {
// 赋值excel内容后div赋值的内容不会自动折行, excel的内容折行是用/n实现折行的,所以这里要加个换行下再给div赋值
$('#last-input').html($(this).val().replace(/\n/g, '<br/>'));
$(this).height($('#last-input').height());
})