?

?

?

?

?

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

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

后臺(tái)的小伙伴將微信昵稱中的特殊字符轉(zhuǎn)換成html實(shí)體編碼（例如：“哆啦A夢(mèng)😜😜”）。

這個(gè)展示還不簡(jiǎn)單隨便放入一個(gè)html標(biāo)簽就可以正常展示了：

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

如圖：

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

<div v-html="name"></div>data () {return {name:'哆啦A夢(mèng)&#128540;&#128540;'} }

如圖：

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

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

如圖：

沒辦法需求還是要實(shí)現(xiàn)的，找度娘、跟同事請(qǐng)教，最后總結(jié)出兩個(gè)解決方案。

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

定義和用法

contenteditable 屬性規(guī)定是否可編輯元素的內(nèi)容。

HTML 4.01 與 HTML 5 之間的差異

contenteditable 屬性是 HTML5 中的新屬性。

語(yǔ)法

<element contenteditable="value">

屬性值

值描述

true	規(guī)定可以編輯元素內(nèi)容。
false	規(guī)定無法編輯元素內(nèi)容。
classname	繼承父元素的 contenteditable 屬性。

廢話不多說上代碼：

給span標(biāo)簽添加contenteditable屬性后，可以利用input及blur事件實(shí)現(xiàn)類似雙向綁定的效果（假象，不要當(dāng)真）

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夢(mèng)&#128540;&#128540;</span><div>{{spanVal}}</div> </div>

js部分代碼data(){return {name:'哆啦A夢(mèng)&#128540;&#128540;',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; }　

?本來想放一段錄屏看一下效果，原諒我不會(huì)添加視頻到文章里，只能小伙伴自己動(dòng)手實(shí)現(xiàn)了。

如圖：

?

?

解決方案二：先在html標(biāo)簽中解析，再將解析后的值賦值給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夢(mèng)&#128540;&#128540;',nameVal:'',spanVal:''}},mounted () {this.nameVal = this.$refs.name.innerHTML}

style部分
.hidden{ visibility: hidden; } ?

?

如圖：

由于我的項(xiàng)目布局已經(jīng)成型，不想改動(dòng)太大所以采用的第二種解決方案。個(gè)人覺得第一種解決方案很適合自定義表單輸入組件呢，有時(shí)間可以試試。

以上就是我對(duì)于微信昵稱特殊字符前端顯示問題的記錄總結(jié)，如果有更好的解決方案，還請(qǐng)多多指教啊。

?

轉(zhuǎn)載于:https://www.cnblogs.com/skylineStar/p/9883266.html

總結(jié)

以上是生活随笔為你收集整理的微信昵称表情符号前端显示问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。