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学习笔记2 函数
Jan 11 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 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 GeoIP的使用教程
2011/03/09 PHP
PHP无限分类(树形类)
2013/09/28 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
js点击选择文本的方法
2015/02/09 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python 实现简单的电话本功能
2015/08/09 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
python如何实现图片压缩
2020/09/11 Python
python 实现表情识别
2020/11/21 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
全球性的在线购物网站:Zapals
2017/03/22 全球购物
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
纽约海:Sea New York
2018/11/04 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
征用土地赔偿协议书
2014/09/26 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
昆虫记读书笔记
2015/06/26 职场文书
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js