angularjs使用div模拟textarea文本框的方法


Posted in Javascript onOctober 02, 2018

html:

<div class="simulate-textarea"
  ng-model="view.text" contenteditable="true" placeholder="请输入内容"></div>

Angularjs指令:

/**
 * div模拟textarea输入框双向数据绑定指令
 */
 .directive('contenteditable', [function() {
 return {
  require: 'ngModel',
  link: function(scope, element, attrs, ctrl) {
  //view -> model
  element.bind('input', function() {
   scope.$apply(function() {
   ctrl.$setViewValue(element.html());
   });
  });
  //model -> view
  ctrl.$render = function() {
   element.html(ctrl.$viewValue);
  };
  }
 };
 }

css:

.simulate-textarea {
 margin-left: 84px;
 display: inline-block;
 width: calc(100% - 84px);
 /*border: 1px solid #dddddd;*/
 min-height:20px;
 _height: 20px;
 max-height: 120px;
 /*border-radius: 4px;*/
 /*padding: 4px 6px;*/
 outline: 0;
 word-break:break-all;
 word-wrap: break-word;
 white-space: pre-wrap;
 overflow-x: hidden;
 overflow-y: auto;
 line-height: 20px;
 font-size: 12px;
}

以上这篇angularjs使用div模拟textarea文本框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
JS通过相同的name进行表格求和代码
Aug 18 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
JS面向对象编程详解
Mar 06 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
详解小程序循环require之坑
Mar 08 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 #Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 #Javascript
浅谈开发eslint规则
Oct 01 #Javascript
Angular ElementRef简介及其使用
Oct 01 #Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 #Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 #Javascript
vue项目持久化存储数据的实现代码
Oct 01 #Javascript
You might like
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
php之curl设置超时实例
2014/11/03 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
python连接字符串的方法小结
2015/07/13 Python
Django中的Signal代码详解
2018/02/05 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
详解django中Template语言
2020/02/22 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
总裁助理岗位职责
2014/02/17 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
2014年学生会工作总结
2014/11/07 职场文书
2015年助残日活动总结
2015/03/27 职场文书
运动会主持人开幕词
2016/03/04 职场文书
深入浅析React中diff算法
2021/05/19 Javascript
Python读写yaml文件
2022/03/20 Python
python获取字符串中的email
2022/03/31 Python