微信昵稱表情符號前端顯示問題

 

 

 

 

 

最近項目中遇到一個問題，微信昵稱中的特殊字符不能正常顯示，比如表情，各種笑臉、小動物、愛心之類的。

最恨這些標新立異的人，老老實實輸入名字不行么，非要輸入表情，o(╥﹏╥)o

后台的小伙伴將微信昵稱中的特殊字符轉換成html實體編碼（例如：“哆啦A夢😜😜”）。

這個展示還不簡單隨便放入一個html標簽就可以正常展示了：

<div>Jerry&#128540;&#128063;</div>

如圖：

在vue項目中也好說，只要使用v-html指令就可以輕松搞定：

<div v-html="name"></div>


data () {
    return {
       name:'哆啦A夢&#128540;&#128540;'
    }
}

如圖：

問題就在於，微信昵稱需要可編輯，但是input的value屬性只能識別字符串，無法正確解析html實體：

<input class="editSpan" type="text" :value="name">

如圖：

沒辦法需求還是要實現的，找度娘、跟同事請教，最后總結出兩個解決方案。

解決方案一：利用HTML 5 全局 contenteditable 屬性。

定義和用法

contenteditable 屬性規定是否可編輯元素的內容。

HTML 4.01 與 HTML 5 之間的差異

contenteditable 屬性是 HTML5 中的新屬性。

語法

<element contenteditable="value">

屬性值

值	描述
true	規定可以編輯元素內容。
false	規定無法編輯元素內容。
classname	繼承父元素的 contenteditable 屬性。

廢話不多說上代碼：

給span標簽添加contenteditable屬性后，可以利用input及blur事件實現類似雙向綁定的效果（假象，不要當真）

html部分代碼

<h4>解決方案1</h4>
<br>
<div>
    <span class="editSpan" contenteditable="true" style="-webkit-user-select: text;" id="name" @input="getName($event)" @blur="getName($event)">哆啦A夢&#128540;&#128540;</span>
    <div>{{spanVal}}</div>
</div>

js部分代碼

data(){
    return { name:'哆啦A夢😜😜', nameVal:'', spanVal:'' } }, methods: { getName(evt){ console.log(evt.target.innerHTML) this.spanVal = evt.target.innerHTML } },

style部分代碼


.editSpan{
  display: block;
  width: 80%;
  height:2.5rem;
  line-height: 2.5rem;
  border: 1px solid #e7e7e7;
  border-radius: 3px;
  margin: auto;
}　

 本來想放一段錄屏看一下效果，原諒我不會添加視頻到文章里，只能小伙伴自己動手實現了。

如圖：

 

 

解決方案二：先在html標簽中解析，再將解析后的值賦值給input的value屬性。

html部分

<h4>解決方案2</h4>
    <br>
    <div>
      <input class="editSpan" type="text" :value="nameVal">
      <span class="hidden" v-html="name" ref="name"></span>
    </div>

js部分

data(){
    return {
      name:'哆啦A夢&#128540;&#128540;',
      nameVal:'',
      spanVal:''
    }
  },

  mounted () {
    this.nameVal = this.$refs.name.innerHTML
  }

style部分

.hidden{

    visibility: hidden;

}

 

如圖：

由於我的項目布局已經成型，不想改動太大所以采用的第二種解決方案。個人覺得第一種解決方案很適合自定義表單輸入組件呢，有時間可以試試。

以上就是我對於微信昵稱特殊字符前端顯示問題的記錄總結，如果有更好的解決方案，還請多多指教啊。