相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个。

过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row。

如果你也像我一样打算使用textarea,那么很抱歉,你一开始就错了。

textarea不是不可以的,然后我是这样错的。(就是监听scroll 如果出现了,就增加1rows 的高度)然而这样真的很挫

 textarea.bind('change','keydown'){
if(scrollTop > 0 ) {
textarea.rows += 1
}
}

正确的打开方式应该是利用 html5 全局属性,然而在ios 移动端中,仅使用contenteditable,是无法获得焦点的,无法进行输入的,因此需要添加user-select属性

<div contenteditable='true'  style='-webkit-user-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-user-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);
}
}
};
});

  

div实现自适应高度的textarea,实现angular双向绑定的更多相关文章

  1. “自适应”高度的 textarea 文本输入框

    写在前面 那啥,在我的那个很安静的一个 CSS 群(群号:82991297)突然看到有人在问一个问题. 使用 css 如何实现:textarea 如何实现高度自适应? 当时看到这个问题的时候,我脑中只 ...

  2. 自适应高度的 textarea

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. Vue &amp;&amp; Angular 双向绑定检测不到对象属性的添加和删除

    由于ES5的限制 Vue  && Angular 双向绑定检测不到对象属性的添加和删除  还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...

  4. div height 自适应高度 占满剩余高度的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. div左右自适应高度一致

    <div style="width:300px;"> <div id="Left" style="float:left;" ...

  6. angular 双向绑定

    <input type="text" [(ngModel)]="name"> {{name}} import { Component, OnInit ...

  7. 关于angular双向绑定的一个问题,百度无果,还请帮忙解惑。

    用了一段时间anjular蛮好用的.其实用的功能不多.主要用于列表数据绑定以及一些简单效果的绑定,但是最近出现一个现象,百度无果,居然没有人遇到.现在描述一下,截图不方便,希望有人解惑. 列表ng-r ...

  8. angular双向绑定与单向绑定的写法区别

    [ngModel]="manualCode" (ngModelChange)="manualCode=$event;" 等价于下面这样的写法: [(ngMode ...

  9. Angular双向绑定简单理解

    在使用Antd的时候,一直很好奇里面的双向绑定的自定义组件是怎么做的. 因为之前一直用,没有去细看文档. 今天抽空来简单的撸一下. 在ng中,()是单向数据流,从视图目标到数据源,[()]这样就是双向 ...

随机推荐

  1. C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 能支撑10万以上客户端的数据同步下载问题

    庞大的业务系统,特别是需要有离线作业操作支持的核心业务系统,需要有强大的基础数据同步功能,基础数据有在增加.有在变动.有在失效,同时有大量的客户端全天侯的在连接服务器.不间断的在处理核心数据. 经过2 ...

  2. Java -&gt; 把Excel表格中的数据写入数据库与从数据库中读出到本地 (未完善)

    写入:没有关闭流,容错并不完善. private void insertFile(HttpServletRequest request, HttpServletResponse response) t ...

  3. js页面跳转整理

    js页面跳转整理 js方式的页面跳转1.window.location.href方式    <script language="javascript" type=" ...

  4. SQL Server调优系列基础篇

    前言 关于SQL Server调优系列是一个庞大的内容体系,非一言两语能够分析清楚,本篇先就在SQL 调优中所最常用的查询计划进行解析,力图做好基础的掌握,夯实基本功!而后再谈谈整体的语句调优. 通过 ...

  5. 13.python中的字典

    字典其实和之前的元祖和列表功能相似,都是用来储存一系列对象的.也就是一种可变容器,或者是我所比喻的革新派的菜单. 但也不是完全相同,我在之前曾经将字典称为特殊的'序列',是字典拥有序列的部分特性,但是 ...

  6. Codeforces Round #308 (Div. 2) A. Vanya and Table 暴力

    A. Vanya and Table Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/552/pr ...

  7. 原生javascript写的侧栏跟随效果

    浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...

  8. 在Windows Server 2008 R2下搭建jsp环境(二)-JDK的下载安装

    因为服务器上的Tomcat的运行环境需要JDK的支持,所以,掌握JDK的安装与下载和配置是一个重要步骤.   1.首先下载最新的JDK版本.网络上提供了最新版本的JDK下载,如图所示.首先选择&quo ...

  9. Springboot helloworld入门最经典例子

    一.建立maven java项目 导入springboot包 二.配置pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0 ...

  10. java GUI 返回图片源码

    返回图片源码,重开一个类粘贴即可 package cn.littlepage.game; import java.awt.Image; import java.awt.image.BufferedIm ...