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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 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
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
财务管理专业自荐信范文
2013/12/24 职场文书
医院工作检讨书范文
2014/02/10 职场文书
国际金融专业自荐信
2014/07/05 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
城南旧事观后感
2015/06/11 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书