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 相关文章推荐
js DataSet数据源处理代码
Mar 29 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 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 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
js正确获取元素样式详解
2009/08/07 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
使用python为mysql实现restful接口
2018/01/05 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
葡萄牙语专业个人求职信
2013/12/10 职场文书
运动会横幅标语
2014/06/17 职场文书
电话客服工作职责
2014/07/27 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
关于童年的读书笔记
2015/06/26 职场文书
遗嘱格式范本
2015/08/07 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技