AngularJS如何用div模拟textarea实现文本框功能？

在Web开发中，文本框（textarea）是常见的表单元素，但原生textarea在样式定制和功能扩展上存在一定局限性，通过AngularJS结合div模拟textarea，可以实现更灵活的文本输入体验，例如自定义滚动条、富文本编辑基础功能或动态调整高度等，本文将详细介绍如何使用AngularJS实现div模拟textarea的技术方案，包括核心原理、代码实现及注意事项。

核心实现原理

div模拟textarea的本质是将一个可编辑的div元素（通过contenteditable属性实现）替换原生textarea，并通过AngularJS的数据绑定和事件监听实现双向数据同步,主要技术点包括：

1. contenteditable属性：使div具备可编辑能力,类似输入框。
2. ng-model绑定：通过AngularJS的指令将div的HTML内容与模型数据关联。
3. 事件监听：捕获输入事件（如input、keydown）实时更新模型值。
4. 样式处理：通过CSS模拟textarea的边框、滚动条及占位符效果。

具体实现步骤

基础HTML结构

在AngularJS应用中，创建一个div元素并设置contenteditable="true"，同时添加ng-model指令实现数据绑定：

<div 
  class="custom-textarea" 
  contenteditable="true" 
  ng-model="textContent"
  placeholder="请输入内容..."
></div>

CSS样式模拟

通过CSS将div渲染为类似textarea的外观,重点处理以下样式：

.custom-textarea {
  border: 1px solid #ccc;
  padding: 8px;
  min-height: 100px;
  max-height: 300px;
  overflow-y: auto;
  background-color: #fff;
  outline: none;
  line-height: 1.5;
}
.custom-textarea[placeholder]:empty::before {
  content: attr(placeholder);
  color: #999;
}

• 滚动条控制：通过overflow-y: auto实现垂直滚动。
• 占位符效果：利用CSS伪元素:before模拟原生placeholder。

AngularJS指令扩展

原生ng-model默认不支持contenteditable元素,需自定义指令实现双向绑定：

angular.module('app').directive('contenteditable', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      // 监听模型变化，更新div内容
      ngModel.$render = function() {
        element.html(ngModel.$viewValue || '');
      };
      // 监听输入事件，同步模型值
      element.on('input', function() {
        scope.$apply(function() {
          ngModel.$setViewValue(element.html());
        });
      });
    }
  };
});

使用时将ng-model替换为自定义指令：

<div 
  class="custom-textarea" 
  contenteditable 
  contenteditable-model="textContent"
  placeholder="请输入内容..."
></div>

高级功能实现

动态调整高度自动扩展div高度,提升用户体验：

element.on('input', function() {
  element.css('height', 'auto');
  element.css('height', element[0].scrollHeight + 'px');
  scope.$apply(function() {
    ngModel.$setViewValue(element.html());
  });
});

富文本基础支持：通过document.execCommand实现简单的文本格式化：

<div class="toolbar">
  <button ng-click="formatText('bold')">加粗</button>
  <button ng-click="formatText('italic')">斜体</button>
</div>
<div contenteditable contenteditable-model="textContent"></div>

$scope.formatText = function(command) {
  document.execCommand(command, false, null);
  // 重新触发模型更新
  angular.element('.custom-textarea').trigger('input');
};

注意事项与兼容性处理

1. XSS风险：contenteditable元素可能存在XSS漏洞，需对用户输入进行HTML转义或使用$sanitize服务：

   

   ngModel.$setViewValue(element.text()); // 存储纯文本

2. 浏览器差异：

   • IE浏览器需处理paste事件,过滤粘贴内容的格式。
   • 移动端需测试键盘弹出时的布局适配。

3. 性能优化：频繁的$apply可能导致性能问题，建议使用防抖（debounce）技术优化事件处理。

与传统textarea的对比

通过AngularJS结合div模拟textarea的技术方案，可以有效突破原生输入框的样式和功能限制，实现更个性化的文本输入组件，尽管需要处理兼容性和安全性问题，但其灵活性和扩展性使其在复杂表单场景中具有显著优势，开发者可根据实际需求选择是否引入该方案,并在实现过程中注重用户体验与代码健壮性的平衡。