html展⽰昵称特殊字符,昵称表情符号前端显⽰问题最近项⽬中遇到⼀个问题,昵称中的特殊字符不能正常显⽰,⽐如表情,各种笑脸、⼩动物、爱⼼之类的。
最恨这些标新⽴异的⼈,⽼⽼实实输⼊名字不⾏么,⾮要输⼊表情,o(╥﹏╥)o
后台的⼩伙伴将昵称中的特殊字符转换成html实体编码(例如:“哆啦A梦  ”)。
这个展⽰还不简单随便放⼊⼀个html标签就可以正常展⽰了:
Jerry
如图:
在vue项⽬中也好说,只要使⽤v-html指令就可以轻松搞定:
name:'哆啦A梦  '}
}
如图:
问题就在于,昵称需要可编辑,但是input的value属性只能识别字符串,⽆法正确解析html实体:
如图:
没办法需求还是要实现的,度娘、跟同事请教,最后总结出两个解决⽅案。
解决⽅案⼀:利⽤HTML 5 全局 contenteditable 属性。
定义和⽤法
contenteditable 属性规定是否可编辑元素的内容。
HTML 4.01 与 HTML 5 之间的差异
contenteditable 属性是 HTML5 中的新属性。
语法
属性值
描述
true
规定可以编辑元素内容。
false
规定⽆法编辑元素内容。
代码转换classname
继承⽗元素的 contenteditable 属性。
废话不多说上代码:
给span标签添加contenteditable属性后,可以利⽤input及blur事件实现类似双向绑定的效果(假象,不要当真)
html部分代码
解决⽅案1
哆啦A梦
{{spanVal}}
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部分
解决⽅案2
data(){return{
name:'哆啦A梦  ',
nameVal:'',
spanVal:''}
},
mounted () {this.nameVal = this.$refs.name.innerHTML
}
style部分
.hidden{
visibility: hidden;
}
如图:
由于我的项⽬布局已经成型,不想改动太⼤所以采⽤的第⼆种解决⽅案。个⼈觉得第⼀种解决⽅案很适合⾃定义表单输⼊组件呢,有时间可以试试。
以上就是我对于昵称特殊字符前端显⽰问题的记录总结,如果有更好的解决⽅案,还请多多指教啊。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。