div实现自适应高度的textarea,实现angular双向绑定
相信不少同学模拟过腾讯的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双向绑定的更多相关文章
- “自适应”高度的 textarea 文本输入框
写在前面 那啥,在我的那个很安静的一个 CSS 群(群号:82991297)突然看到有人在问一个问题. 使用 css 如何实现:textarea 如何实现高度自适应? 当时看到这个问题的时候,我脑中只 ...
- 自适应高度的 textarea
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- Vue && Angular 双向绑定检测不到对象属性的添加和删除
由于ES5的限制 Vue && Angular 双向绑定检测不到对象属性的添加和删除 还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...
- div height 自适应高度 占满剩余高度的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- div左右自适应高度一致
<div style="width:300px;"> <div id="Left" style="float:left;" ...
- angular 双向绑定
<input type="text" [(ngModel)]="name"> {{name}} import { Component, OnInit ...
- 关于angular双向绑定的一个问题,百度无果,还请帮忙解惑。
用了一段时间anjular蛮好用的.其实用的功能不多.主要用于列表数据绑定以及一些简单效果的绑定,但是最近出现一个现象,百度无果,居然没有人遇到.现在描述一下,截图不方便,希望有人解惑. 列表ng-r ...
- angular双向绑定与单向绑定的写法区别
[ngModel]="manualCode" (ngModelChange)="manualCode=$event;" 等价于下面这样的写法: [(ngMode ...
- Angular双向绑定简单理解
在使用Antd的时候,一直很好奇里面的双向绑定的自定义组件是怎么做的. 因为之前一直用,没有去细看文档. 今天抽空来简单的撸一下. 在ng中,()是单向数据流,从视图目标到数据源,[()]这样就是双向 ...
随机推荐
- java head space/ java.lang.OutOfMemoryError: Java heap space内存溢出
上一篇JMX/JConsole调试本地还可以在centos6.5 服务器上进行监控有个问题端口只开放22那么设置的9998端口 你怎么都连不上怎么监控?(如果大神知道还望指点,个人见解) 线上项目出现 ...
- JavaScript中事件处理
先看看下面一道题目,请评价以下代码并给出改进意见: if (window.addEventListener) {//标准浏览器 var addListener = function(el, type, ...
- bcp 命令实例
set sql_flow="select Id,',',ApplierName,',',FlowStatus,',',IsApproved,',',CreateTime from *** w ...
- 卸载oracle之后,如何清除注册表
之前卸载了oracle,今天偶然间发现,在服务和应用程序里面,还残存着之前的oracle服务.原来,还需要去清理下注册表. 在开始菜单的这个框里面 输入regedit,进入注册表.找到这个目录 HKE ...
- js callee,caller学习
原文地址:js callee,caller学习 /* * caller 返回一个对函数的引用,该函数调用了当前函数. * 如果函数是由顶层调用的,那么 caller包含的就是 null . * 如果在 ...
- Java开发中的23种设计模式详解
[放弃了原文访问者模式的Demo,自己写了一个新使用场景的Demo,加上了自己的理解] [源码地址:https://github.com/leon66666/DesignPattern] 一.设计模式 ...
- RabbitMQ + PHP (三)案例演示
今天用一个简单的案例来实现 RabbitMQ + PHP 这个消息队列的运行机制. 主要分为两个部分: 第一:发送者(publisher) 第二:消费者(consumer) (一)生产者 (创建一个r ...
- 【JavaScript】innerHTML、innerText和outerHTML的用法区别
用法: <div id="test"> <span style="color:red">test1</span> tes ...
- 【开源】专业K线绘制[K线主副图、趋势图、成交量、滚动、放大缩小、MACD、KDJ等)
这是一个iOS项目雅黑深邃的K线的绘制. 实现功能包括K线主副图.趋势图.成交量.滚动.放大缩小.MACD.KDJ,长按显示辅助线等功能 预览图 最后的最后,这是项目的开源地址:https://git ...
- gulp 自动添加版本号
本文介绍利用 gulp-rev 和 gulp-rev-collector 进行版本管理 npm官网介绍使用后的效果如下: "/css/style.css" => " ...