多次点击ŞHOW / HIDE
。
您会看到,每次单击后,文本区域变得越来越高。
是什么原因以及如何避免这种情况。
我总是需要文本区域来适合内容。
$('#btna').on('click', function(){
$('#txa').hide()
});
$('#btnb').on('click', function(){
$('#txa').show()
let a = $('#txa').prop('scrollHeight');
$('#txa').height(a);
});
#txa, #txb{
display:block;
width:100%;
resize:none;
overflow:hidde;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<textarea id='txa'>
lorem ipsum
lorem ipsum
</textarea>
<button id='btnb'>SHOW</button>
<button id='btna'>HIDE</button>
答案 0 :(得分:1)
请尝试这个。
$('#btna').on('click', function(){
$('#txa').hide()
});
$('#btnb').on('click', function(){
$('#txa').show()
});
autosize();
function autosize(){
var text = $('#txa');
text.each(function(){
$(this).attr('rows',1);
resize($(this));
});
text.on('input', function(){
resize($(this));
});
function resize ($text) {
$text.css('height', 'auto');
$text.css('height', $text[0].scrollHeight+'px');
}
}
#txa, #txb{
display:block;
width:100%;
resize:none;
overflow:hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<textarea id='txa' name="md-content">
lorem ipsum
lorem ipsum
sdf
sdf
sdf
sdf
sdf
sdf
s
</textarea>
<button id='btnb'>SHOW</button>
<button id='btna'>HIDE</button>
答案 1 :(得分:0)
在这里,不需要进行高度调节。
$('#btna').on('click', function(){
$('#txa').hide()
});
$('#btnb').on('click', function(){
$('#txa').show()
});
#txa, #txb{
display:block;
width:100%;
resize:none;
overflow:hidde;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<textarea id='txa'>
lorem ipsum
lorem ipsum
</textarea>
<button id='btnb'>SHOW</button>
<button id='btna'>HIDE</button>
答案 2 :(得分:0)
从脚本中删除以下两行
let a = $('#txa').prop('scrollHeight');
$('#txa').height(a);
它仍然有效,并且不会在textarea字段中添加多余的行。