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


Posted in Javascript onJanuary 08, 2017

相信不少同学模拟过腾讯的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);
 }
 }
 };
});

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery Tools tooltip使用说明
Jul 14 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
原生js获取left值和top值的三种方法
Aug 02 Javascript
easyui-datagrid开发实践(总结)
Aug 02 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 #Javascript
详解js中==与===的区别
Jan 08 #Javascript
JavaScript 动态三角函数实例详解
Jan 08 #Javascript
你不知道的 javascript【推荐】
Jan 08 #Javascript
js时间控件只显示年月
Jan 08 #Javascript
javascript函数的四种调用模式
Jan 08 #Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 #Javascript
You might like
利用 window_onload 实现select默认选择
2006/10/09 PHP
Apache2 httpd.conf 中文版
2006/12/06 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
Python简单日志处理类分享
2015/02/14 Python
python最长回文串算法
2018/06/04 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
python 一维二维插值实例
2020/04/22 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
python 实现逻辑回归
2020/12/30 Python
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
学校大课间活动方案
2014/01/30 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android