我正在寻找一种方法来制作类似 WhatsApp Web 的内容可编辑 div,当按下 SHIFT+ENTER 时它会向上扩展,并相应地最小化它上方的 div(请参见所附屏幕截图中的紫色区域)。
实现这个的最佳方法是什么?
非常感谢。
编辑:我将 vuejs 与 vuetify 一起使用。
最佳答案
我在 css 中使用变量来 clac
.converstion
div
的 height
: https://www.w3schools.com/css/css3_variables.asp
我正在使用 Jquery
但您可以使用 Vue JS
参见 JSFiddle:https://jsfiddle.net/8feswyau/
$('textarea').on({input: function(){
var totalHeight = $(this).prop('scrollHeight') - parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
$(this).css({'height':totalHeight});
$('.conversation').get(0).style.setProperty("--number",totalHeight+'px')
}
});
textarea{
width:243px;
}
.warp{
height:300px;
width:250px;
}
.conversation{
height: calc(100% - var(--number));
position: relative;
background: #efe7dd url(https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg) repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="warp">
<div class="conversation" style="--number: 12px"></div>
<textarea></textarea>
</div>
关于html - WhatsApp Web 喜欢 Content Editable Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50894887/