div实现自适应高度的textarea实现angular双向绑定

div实现自适应高度的textarea实现angular双向绑定

相信不少同学模拟过腾讯的QQ做一个聊天应用，至少我是其中一个。

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

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

textarea不是不可以的，然后我是这样错的。（就是监听scroll 如果出现了，就增加1rows 的高度）然而这样真的很挫

textarea.bind('change','keydown'){

if(scrollTop > 0 ) {

textarea.rows += 1

}

}

正确的打开方式应该是利用 html5 全局属性,然而在ios 移动端中，仅使用contenteditable，是无法获得焦点的，无法进行输入的，因此需要添加use-select属性

//不同浏览器，支持度，和实现方式也有点不一样，android和ios默认webkit内核，所以使用这个够了

在angular中使用可编辑的div：——》 angular的ng-model指令只用于select，input，textarea，不适用于div，所以要进一步封装

/*

* 可编辑的div

* 应用于发表评论中有表情的时候，div中添加img（表情）

*

*/

app.directive('contenteditable', function() {

return {

restrict: 'A',

require: '?ngModel',

link: function(scope, element, attrs, ngModel) {

if (!ngModel) return;

ngModel.$render = function() {

element.html(ngModel.$viewValue || '');

};

element.on('blur keyup change', function() {

scope.$evalAsync(read);

});

read(); // initialize

function read() {

var html = element.html();

if ( attrs.stripBr && html == '
' ) { //清除

html = '';

}

ngModel.$setViewValue(html);

}

}

};

});

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。