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 相关文章推荐
javascript 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
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
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
在Python中使用列表生成式的教程
2015/04/27 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
Python多图片合并PDF的方法
2019/01/03 Python
【python】matplotlib动态显示详解
2019/04/11 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
岗位职责的含义
2013/11/17 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
师范毕业生求职信
2014/07/11 职场文书
工作保证书怎么写
2015/02/28 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis