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 相关文章推荐
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
解决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
ftp类(example.php)
2006/10/09 PHP
php获取某个目录大小的代码
2008/09/10 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
Angular 项目实现国际化的方法
2018/01/08 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python使用cookielib库示例分享
2014/03/03 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
python判断输入日期为第几天的实例
2018/11/13 Python
python对于requests的封装方法详解
2019/01/03 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
楼面经理岗位职责范本
2014/02/18 职场文书
高考升学宴答谢词
2015/01/20 职场文书
小班下学期个人总结
2015/02/12 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
七年级作文之冬景
2019/11/07 职场文书