【留言板】可编辑输入框操作总结

闲暇之余，用于加深自己对基础的了解，徒手撸了一个留言板：输入框。废话少说，进入正题。简陋的效果如下(下载代码)：

一、定义需求

1. 可输入文本，以及插入表情。
2. 兼容性：IE与标准浏览器

二、详细设计

根据需求，我们大致可以想到如下问题：

1. 兼容性的处理
   1. 事件绑定的兼容性
   2. 可编辑输入框的表情插入兼容性
   3. 获取数据的兼容性
2. 三个模块
3. 1. 留言板与ui交互的模块
   2. 表情展示模块
   3. 可编辑输入框的操作模块 因此我规划了如下的类结构：

• LeaveMsg：实现UI与留言板的交互
• FaceWrap：实现表情殂的管理，以及相应事件的响应，如显示/隐藏，获取表情，初始化表情列表等。
• SelectionUitls：实现可编辑输入框的操作，如：插入一个表情、获取数据等。 各模块的兼容性在以下细节中进行介绍。

三、代码实现

1. FaceWrap类（表情列表管理类）

var FaceWrap = function(head, cont, opts){  this.$head = head;  this.$cont = cont;  this.data = ['one', 'two', 'thr'];  var self = this;  var toggle = false;  this.onClickHandHandle = function(evt){    if(!toggle){      self.$cont.style.display = 'block';      toggle = true;    }else{      self.$cont.style.display = 'none';      toggle = false;    }    if(opts.onClickHandHandle){      opts.onClickHandHandle(toggle);    }  }  this.onChooseImg = opts. onChooseImg || function(){}  this.generalFaceImg();  this.bind();}var facePt = FaceWrap.prototype;facePt.generalFaceImg = function(){  var fragment = document.createDocumentFragment();  for( var index =0; index < this.data.length; ++index){    var data = this.data[index];    var img = document.createElement('img');    img.setAttribute('src', '../img/face/' + data + '.jpg');    img.setAttribute('data-id', data);    img.setAttribute('class','face-img');    fragment.appendChild(img);  }  this.$cont.appendChild(fragment);}facePt.bind = function(){   if(document.attachEvent){    this.$head.attachEvent('onclick',this.onClickHandHandle);    this.$cont.attachEvent('onclick',this.onChooseImg);  }else{        this.$head.addEventListener('click',this.onClickHandHandle);    this.$cont.addEventListener('click',this.onChooseImg);  }}facePt.hide = function(){  this.onClickHandHandle();}

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：【留言板】可编辑输入框操作总结

关键词：