当前位置：编程学堂 > div实现自适应高度的textarea，并实现角度双向绑定

div实现自适应高度的textarea，并实现角度双向绑定

发布：2023-09-30 15:20

-->

相信很多同学都模仿腾讯的QQ做了一个聊天应用，至少我是其中之一。

过程中遇到的一个问题是QQ输入框的自适应高度，最大高度为3行。

如果你像我一样打算使用textarea，那么我很抱歉，但你从一开始就错了。

textarea 也不是不可能，但是我就这样错了。（也就是说，如果出现监控滚动条，则将高度增加1行）不过，这实在是令人沮丧

textarea.bind('change','keydown'){
if(scrollTop > 0) {
文本区域.行 += 1
}
}

正确的打开方式应该是使用html5全局属性。但在ios移动端，仅使用contenteditable无法获得焦点和输入，所以需要添加user-select属性

　　
//不同的浏览器，支持程度，实现方法有点不同。 Android和iOS默认使用webkit内核，所以这就足够了

在Angular中使用可编辑的div： --> Angular的ng-model指令仅用于select、input和textarea，而不用于div，所以需要进一步封装

/*
* 可编辑div
* 发表情评论时使用，在div中添加img（表情）
*

*/
www.sychzs.cnive('contenteditable', function() {
返回{
限制：'A'，
要求：'？ngModel'，
链接：函数（范围、元素、属性、ngModel）{
if (!ngModel) 返回； ngModel.$render = function() {
element.html(ngModel.$viewValue || '');
}; element.on('模糊按键更改', function() {
范围.$evalAsync(read);
});
读（）; // 初始化函数 read() {
var html = element.html();
if ( attrs.stripBr && html == '
' ) { //清除

html = '';
}
ngModel.$setViewValue(html);
}
}
};
});

　　

-->

相关文章

win7系统不能玩帝国时代怎么办|win7系统不
2023-10-04 05:41
如何在linux中卸载nginx（linux中卸
2023-10-04 05:21
lubuntu和ubuntu的区别（lubunt
2023-10-04 05:21
如何查看Linux时间（Linux查看系统时间命
2023-10-04 05:21
Python for NLP：如何从PDF文件中
2023-10-04 05:12