angularjs使用div模拟textarea文本框的方法
更新时间：2018年10月02日 14:14:55 作者：飞向Hadoop
今天小编就为大家分享一篇angularjs使用div模拟textarea文本框的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
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文本框的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
将angular.js项目整合到.net mvc中的方法详解
这篇文章主要给大家介绍了将angular.js项目整合到.net mvc中的相关资料，文中通过示例代码将实现的过程介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。2017-06-06
本篇文章主要介绍了如何在Angular2中使用jQuery及其插件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
今天小编就为大家分享一篇angularjs1.5 组件内用函数向外传值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
angular2+node.js express打包部署的实战
本篇文章主要介绍了angular2+node.js express打包部署的实战，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了详解angular部署到iis出现404解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
AngularJs根据访问的页面动态加载Controller的解决方案
这篇文章主要介绍了AngularJs根据访问的页面动态加载Controller的解决方案,需要的朋友可以参考下2015-02-02
详解angularJS动态生成的页面中ng-click无效解决办法
这篇文章主要介绍了详解angularJS动态生成的页面中ng-click无效解决办法，非常具有实用价值，需要的朋友可以参考下2017-06-06
这篇文章给大家详细介绍了AngularJS中ng-src指令的使用，对大家学习AngularJS具有一定参考价值，有需要的朋友们可以参考借鉴。2016-09-09
Angular 2父子组件数据传递之@Input和@Output详解(下)
这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@Input和@Output的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
AngularJS基础 ng-model 指令详解及示例代码
本文主要介绍AngularJS ng-model 指令,这里帮大家整理了ng-model的基本资料,并附有示例代码,有需要的小伙伴可以参考下2016-08-08
最新评论