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);
 }
 }
 };
});

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

(0)

相关推荐

  • 利用angular.copy取消变量的双向绑定与解析

    首先我们来看看示例代码 <body ng-app="app"> <div ng-controller="CopyController"> <div> data: <input ng-model="user.data" /><br> user.data: {{user.data}} <br> user1.data: {{user1.data}} <br> <b

  • 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

  • AngularJS入门教程之双向绑定详解

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f step-4 你应该发现除了搜索框之外,你的应用多了一个下来菜单,它可以允许控制电话排列的顺序. 步骤3和步骤4之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 模板 app/index.html Search: <input ng-model="query"&g

  • 浅谈angular.js中实现双向绑定的方法$watch $digest $apply

    Angular.js 中的特性,双向绑定. 多么神奇的功能,让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. '参数' 就是$scope

  • angular+bootstrap的双向数据绑定实例

    效果图: 代码如下: <!doctype html> <html ng-app="UserInfoModule"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel=&quo

  • Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

    我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写入访问器属性时,会调用setter函数并传入新值. 这里介绍的重点是

  • 深入学习AngularJS中数据的双向绑定机制

    Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好.双向数据绑定可能是AngularJS最酷最实用的特性,将MVC的原理展现地淋漓尽致. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入.AngularJS将会遍历DOM模

  • 理解Angular数据双向绑定

    AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 一.什么是数据双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controller="CounterCtrl"> <span ng-bind="c

  • 实例剖析AngularJS框架中数据的双向绑定运用

    数据绑定 通过把一个文本输入框绑定到person.name属性上,就能把我们的应用变得更有趣一点.这一步建立起了文本输入框跟页面的双向绑定. 在这个语境里"双向"意味着如果view改变了属性值,model就会"看到"这个改变,而如果model改变了属性值,view也同样会"看到"这个改变.Angular.js 为你自动搭建好了这个机制.如果你好奇这具体是怎么实现的,请看我们之后推出的一篇文章,其中深入讨论了digest_loop 的运作. 要建立

  • 深入理解Angularjs向指令传递数据双向绑定机制

    下面来先看一个简单例子 <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../bootstrap.min.js"> </

随机推荐