angularjs输入框自动变化高度（可输入div并运用ng-model）附带placeholder效果

最新推荐文章于 2023-10-25 15:08:45 发布

weixin_33812433

最新推荐文章于 2023-10-25 15:08:45 发布

阅读量396

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cutone/p/5859336.html

版权

angular其实不再需要input和textarea标签来做输入功能，只需要给div加个h5属性contenteditable="true"即可使用ng-model实现双向绑定，和高度自适应的功能，

苹果手机不支持h5属性 contenteditable="true"，需要在这个div中添加样式-webkit-user-select:text

这里的ng-model只能绑定对象中的某一个元素，如ng-model=“content.item”

　　　div{

　　　　　-webkit-user-select:text;　

　　　}

　　 /*为空时显示 element attribute content*/

div :empty:before{

content: attr(placeholder); /* element attribute*/

color:#red; /*content: 'this is content';*/

}

/*焦点时内容为空*/

div :focus:before{

content:none;

}

html代码

directive.js

app.directive('contenteditable', function() {
　　return {
　　　　restrict: 'A', // 只用于属性
　　　　require: '?ngModel', // get a hold of NgModelController
　　link: function(scope, element, attrs, ngModel) {
　　　　if (!ngModel) {
　　　　　　return;
　　　　}
　　　　// Specify how UI should be updated
　　　　ngModel.$render = function() {
　　　　　　element.html(ngModel.$viewValue || '');
　　　　};
　　　　// Listen for change events to enable binding
　　　　element.on('blur keyup change', function() {
　　　　　　scope.$apply(readViewText);
　　　　});
　　　　// No need to initialize, AngularJS will initialize the text based on ng-model attribute
　　　　// Write data to the model
　　　　function readViewText() {
　　　　　　var html = element.html();
　　　　　　// When we clear the content editable the browser leaves a <br> behind
　　　　　　// If strip-br attribute is provided then we strip this out
　　　　　　if (attrs.stripBr && html === '<br>') {
　　　　　　　　html = '';
　　　　　　}
　　　　　　ngModel.$setViewValue(html);
　　　　}
　　}
};