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 函数链之演变
Apr 07 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
Dec 27 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
微信小程序自定义组件
Aug 16 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
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 数据库树的遍历方法
2009/02/06 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
php查询whois信息的方法
2015/06/08 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
jQuery列表检索功能实现代码
2017/07/17 jQuery
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
py2exe 编译ico图标的代码
2013/03/08 Python
python结合API实现即时天气信息
2016/01/19 Python
Python数据结构之翻转链表
2017/02/25 Python
Python实现视频下载功能
2017/03/14 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
python实现泊松图像融合
2018/07/26 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
Django框架自定义session处理操作示例
2019/05/27 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
销售职业生涯规划范文
2014/03/14 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
安全责任书范文
2014/08/25 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
十岁生日答谢词
2015/01/05 职场文书
python实现会员管理系统
2022/03/18 Python