div实现自适应高度的textarea实现angular双向绑定
更新时间：2017年01月08日 10:26:49 作者：miaowwwww
本文主要介绍了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属性
<div contenteditable='true' style='-webkit-use-select:text'></div> //不同浏览器，支持度，和实现方式也有点不一样，android和ios默认webkit内核，所以使用这个够了
在angular中使用可编辑的div：——》 angular的ng-model指令只用于select，input，textarea，不适用于div，所以要进一步封装
/*
* 可编辑的div
* 应用于发表评论中有表情的时候，div中添加img（表情）
* <div contenteditable strp-br='true' style='-webkit-use-select:text'></div>
*/
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 == '<br>' ) { //清除 <br>
html = '';
}
ngModel.$setViewValue(html);
}
}
};
});
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
本篇文章主要介绍了Angular 作用域的具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要给大家介绍了关于Angular 4中如何显示内容的CSS样式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
单页应用中，组件时构建应用的基础元素，页面展示什么内容均是靠页面有什么组件决定的，而展示什么组件又是由一组路由（带有Url元素的特定集合，可用于导航视图）决定的，希望本文可以帮助读者了解路由的基础概念和基础使用、写法。2021-05-05
理解Angular的providers给Http添加默认headers
本篇文章主要介绍了理解Angular的providers给Http添加默认headers，具有一定的参考价值，有兴趣的同学可以了解一下2017-07-07
本文主要介绍AngularJS ng-submit 指令,这里对ng-submit 指令的基础资料做了详细介绍整理，并附有代码示例，有需要的小伙伴可以参考下2016-08-08
本文主要介绍AngularJS ng-app 指令，这里整理了ng-app指令的一些资料，并附实例代码，有需要的小伙伴可以参考下2016-07-07
Angular设计模式hierarchical injector实现代码复用模块化
这篇文章主要为大家介绍了Angular设计模式hierarchical injector实现代码复用模块化示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
解决三元运算符 报错“SyntaxError: can''''t assign to conditional expre
在本篇文章里小编给大家整理的是关于python三元运算符 报错“SyntaxError: can't assign to conditional expression”的处理方法，需要的朋友们学习下。2020-02-02
这篇文章主要介绍了Bootstrap与Angularjs的模态框实例代码,需要的朋友可以参考下2017-08-08
这篇文章主要介绍了AngularJS模板加载用法,结合实例形式详细分析了AngularJS模板加载所涉及的属性、方法、使用技巧与相关注意事项,需要的朋友可以参考下2016-11-11
最新评论