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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!