contenteditable=“true“属性的标签输入框，内容实现高度自适应以及其他处理

一. 功能需求

1.1 输入框未获取焦点、失去焦点且输入框无内容的情况下，如下图：

1.2 输入框获取焦点情况下，如下图：

1.3 用户最多输入200个字符， 想要的效果如下图：（给出提示，只保留200个字符，且光标在文末）

而不是这样的效果，如下图：（光标跑到了文首）

1.4 复制内容进输入框时，想要的效果如下图：

而不是这样的效果，如下图：

1.5 输入三排字以后输入框高度固定，超过三排字的内容可以上下滑动看。若想要输入框高度一直自适应，则输入框的css不要加height和max-height。

二. 代码实现

刚开始我选择的是textarea标签，但是该标签不能随着文本内容自动变化高度，需要通过js操作dom来动态改变，比较麻烦，我就放弃了。选择了HTML5的一个属性contenteditable。

思路：默认时，输入框是有一个高度的。我这里的需求是输入三排文字后输入框高度就固定，所以你在算好相关padding,margin以及文字的line-height以后，给与输入框一个max-height即可。

2.1 实现上面1.1和1.2功能，代码如下（采坑版）

<div id="textarea" ontenteditable="true"  @focus="removeDefaultContent" @blur="addDefaultContent">
   <img src="~images/index/[email protected]" alt="">
   <span>随便说说</span> 
</div>

思路：获取焦点的时候，通过js操作innerHTML把内容清空。失去焦点的时候判断innerHTML有没有值，没有的话，重新通过js操作innerHTML把span和img标签加上。

问题：通过js操作innerHTML把span和img标签加上，图片不显示，审查元素发现img标签的src地址是http://192.168.0.108:8089/images/index/[email protected]，本来是本地的图片，现在反而是访问本地服务器了。

解决： img标签不写src属性，而是通过css样式添加背景图像。

结果：js操作innerHTML把span和img标签加上后，图片依然不显示，且我才发现img和span的css样式根本就没生效。

原因： vue中css编译完成后类名后会有随机码做唯一标识，这就导致了拼接的html中的类名与编译后的类名不同，也就无法生效了。

解决： 参考https://www.cnblogs.com/hhyf/p/11409386.html

我没有采用这种方法，想了下拼接的html不行的话，那我通过伪类元素直接给你自身添加，这样不管你的标识码怎么变，你始终还是那个你，给你加就没拐，哈哈哈。

2.2 实现上面1.1和1.2功能新方法：通过伪类元素，代码如下：

思路： 通过伪类元素直接给输入框加默认的图片和placeholder内容，输入文字的样式通过id标签加上，伪类元素的样式通过class属性加上。当输入框获取焦点时，移除class样式，当失去焦点时，若没有输入内容或者全为空的情况下，添加class样式。

结果： 可。

html部分：
<!-- 回答问题部分 -->
 <div class="to-answer-question">
    <!-- 输入框部分 -->
    <div ref="textarea" class="textarea" id="textarea" contenteditable="true" placeholder="随便说说" @focus="removeDefaultContent" @blur="addDefaultContent" @input="changeAnswerContent" @paste="optimizePasteEvent">
    </div>

    <!-- 发送输入内容 -->
    <div id="send-answer" class="send-answer" @click.stop="sendAnswer">
      <img src="~images/index/[email protected]" alt="">
      <span>发送</span>
    </div>

    <!-- 分享功能（暂时不实现） -->
    <div class="share-question" v-if="showShareQuestion"> 
      <img src="~images/index/[email protected]" alt="">
      <span>分享</span>
    </div>
</div>

css部分（scss）：
.to-answer-question {
  width: 100%;
  background: #fff;
  padding: 8px 16px;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1000;
  box-shadow: 0 -1px 1px 0 rgba(100, 100, 100, .05);
  display: flex;
  justify-content: space-between;
  align-items: center;

  #textarea {
    width: 100%;
    height: auto;
    font-size: 13px;
    color: #333;
    line-height: 16px;
    text-align: left;
    margin-right: 20px;
    background: #f8f9ff;
    border-radius: 8px;
    padding: 6px 13px;
    max-height: 54px;
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-y: visible;
  }
  .textarea {
    &:before {
      content: '';
      display: inline-block;
      width: 16px;
      height: 16px;
      background-image: url('~images/index/[email protected]');
      background-size: 100%;
      vertical-align: middle;
      margin-right: 8px;
    }
    &:after {
      content: attr(placeholder);
      display: inline-block;
      color: #999;
      font-size: 13px;
      vertical-align: middle;
      line-height: 16px;
    }
  }

  .send-answer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    img {
      width: 16px;
      height: 16px;
      margin-right: 3px;
    }
    span {
      font-size: 15px;
      color: #ff586b;
      line-height: 16px;
    }
  }

  .share-question {
    flex-shrink: 0;
    margin-left: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    img {
      width: 20px;
      height: 20px;
      margin-right: 2px;
    }
    span {
      font-size: 13px;
      color: #333;
      font-weight: bold;
      line-height: 18px;
    }
  }
}

js代码部分：
export default {
  data() {
    return {
      answerContent: sessionStorage.getItem('answerContent') ? sessionStorage.getItem('answerContent') : null, // 用户对于问题回答的内容
      showShareQuestion: true, // 是否展示分享图标
    }
  },
    
  methods: {
    // 输入框失去焦点时触发
    addDefaultContent(event) {
      // 拿到当前内容
      let textareaContent = event.target.innerText.trim()

      // 没有输入内容或者输入了很多空格后失去焦点，则显示默认内容
      if (textareaContent.length == 0) {
	     // 若全部输入的空格，则先清空
         this.$refs.textarea.innerText = ''
         // 给于伪类元素的css样式名
         this.$refs.textarea.setAttribute('class','textarea')
        
         // 展示分享按钮
         this.showShareQuestion = true
       } else {
         // 仅用于用户在未登录时，在输入框中输入了内容的情况(登录后重新回到该界面时保留之前输入的内容)
         if (!sessionStorage.getItem('userInfo')) {
           sessionStorage.setItem('answerContent', this.answerContent)
         }
       } 
    },

    // 输入框获取焦点时触发，去除默认placeholder且隐藏分享按钮
    removeDefaultContent(event) {
      if (event.target.innerText.length == 0) {
        this.$refs.textarea.classList.remove("textarea")

        this.showShareQuestion = false
      }
    },
  }  
}

2.3 实现上面1.3功能，限制输入文字长度，并且光标显示在文末

过程： 在测试过程中，我发现每次截取前200个值重新赋值给输入框后，光标跑到了文首，这样就很不方便操作了，所以在重新赋值后需要处理光标，将光标放在文末。

结果： 可。

参考： https://blog.csdn.net/qq_31061615/article/details/80263746以及https://developer.mozilla.org/zh-CN/docs/Web/API/Selection

html输入框部分：
<div ref="textarea" class="textarea" id="textarea" contenteditable="true" placeholder="随便说说" @focus="removeDefaultContent" @blur="addDefaultContent" @input="changeAnswerContent" @paste="optimizePasteEvent">
</div>

js代码部分：
methods: {
  // 监听输入框内容的实时变化，然后及时赋值给对应的变量
  changeAnswerContent(event) {
    let textareaContent = event.target.innerText.trim()
    
    if (textareaContent.length > 200) {
       this.$toast('最多允许输入200个字符哦')
       textareaContent = textareaContent.slice(0, 201)
       // 截取前200个赋值给当前文本框
       this.$refs.textarea.innerText = textareaContent

       // 将光标重新定位到内容最后
       this.$nextTick(() => {
         this.keepCursorEnd(event.target)
       })
     }

     // 拿到用户输入的值
     this.answerContent = textareaContent
   },
    
   // 将光标重新定位到内容最后
   keepCursorEnd(obj) {
      // ie11 10 9 firefox safari
      if (window.getSelection) {
      	// 解决firefox不获取焦点无法定位问题
        obj.focus()
        
        // 创建range
        let range = window.getSelection()
        
        // range 选择obj下所有子内容
        range.selectAllChildren(obj)
        
        // 光标移至最后
        range.collapseToEnd()
      } else if (document.selection) { //ie10 9 8 7 6 5
        // 创建选择对象
        let range = document.selection.createRange()
        
        //range定位到obj
        range.moveToElementText(obj)
        
        //光标移至最后
        range.collapse(false)
        range.select()
      }
    },
}

2.4 实现上面2.4功能，在别处复制内容插入输入框时，处理掉复制的样式，只拿取文本部分

过程： 在测试的过程中，发现2.3中光标的定位处理，会只拿当前内容的文本然后将光标定位到最后，这样其实也处理了复制内容插入的样式问题。我测了很多次都没问题，为了以防万一以及学习新知识，我还是加上了@paste="optimizePasteEvent"事件的监听来进行处理。

结果： 可。

参考： https://segmentfault.com/q/1010000009988202及https://developer.mozilla.org/zh-CN/docs/Web/API/ClipboardEvent/clipboardData以及https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

html输入框部分：
<div ref="textarea" class="textarea" id="textarea" contenteditable="true" placeholder="随便说说" @focus="removeDefaultContent" @blur="addDefaultContent" @input="changeAnswerContent" @paste="optimizePasteEvent">
</div>

js代码部分:
method: {
  // 监听粘贴内容到输入框事件，对内容进行处理
  optimizePasteEvent(e) {
    e.stopPropagation()
    e.preventDefault()
    let text = '', event = (e.originalEvent || e)
    if (event.clipboardData && event.clipboardData.getData) {
       text = event.clipboardData.getData('text/plain')
    } else if (window.clipboardData && window.clipboardData.getData) {
       text = window.clipboardData.getData('text')
    }

    if (document.queryCommandSupported('insertText')) {
      document.execCommand('insertText', false, text)
    } else {
      document.execCommand('paste', false, text)
    }
  },
}

2.5 移动端测试的问题

问题： 在移动端测试的时候发现一个问题，输入框一旦获取焦点以后，点击其他任何地方（提交以及分享按钮除外）焦点会一直保留，这样就很恼火了。我收下输入框，由于焦点还存在，不管我点或者滑动其他地方时，输入框会马上弹上来。

解决： 监听当前页面的滑动事件，如果事件对象不是输入框时，则让其失焦。

注意： 离开该页面时，一定要移除事件监听，不然在某些地方点击或者触摸时可能会报blur of undefined错误。

结果： 可。

 mounted() {
   this.$nextTick(() => {
     // 进入页面前看用户是否在登录前已经输入了文字，如果是的话需要展示之前的文字
     if (sessionStorage.getItem('answerContent') != null) {
       // 若有，则需要移除伪类默认样式
       this.$refs.textarea.classList.remove("textarea")
       // 展示用户之前输入内容
       this.$refs.textarea.innerText = sessionStorage.getItem('answerContent')

       // 隐藏分享按钮
       this.showShareQuestion = false
     }
   })

    // 监听点击事件对象是不是输入框，不是的话取消输入框焦点
    window.addEventListener("touchstart", this.selectConfirmBlur)
  },

  // 离开组件前需要移除监听事件，不然会引起blur of undefined的报错
  beforeDestroy() {
    window.removeEventListener('touchstart', this.selectConfirmBlur);
  },
  
  methods: {
  	// 当触摸或点击位置不是输入框时，取消输入框焦点
    selectConfirmBlur(event) {
      if (event.target.id != 'textarea') {
        this.$nextTick(() => {
          this.$refs.textarea.blur()
        })

        // 如果是点击的发送，那么不仅取消焦点，还应该触发发送按钮
        if (event.target.parentNode.id == 'send-answer') {
          this.sendAnswer()
        }
      }
    },
  }

完。