div 模擬輸入框,支援輸入表情

1.html結構

<

div 
idv-clock @click
="emojiclose"
>
<
div 
class
="editbox"
>
<
div 
class
="edit"
contenteditable
="true"
placeholder
="發現乙個好玩的歌房，快來一起玩吧~"
v-on:input
="inputchange($event)"
v-on:keydown
="inputkeydown($event)"
v-on:paste
="inputpaste($event)"
>
div>
<
div 
class
="editbottom"
>
<
img 
class
="emojiimg"
src="../images/emoji-icon.png"
@click.stop
="emojibtn"
/>
<
div 
class
="textlen"
><
span 
class
="curlen"
>}
span
>/140
div>
div>
<
div 
class
="emojibox"
v-show
="isemojishow"
>
<
div 
class
="emojilist"
>
<
span 
class
="emojiimg"
v-for
="(value,key) in arremojilist"
:title
="key"
@click.stop
="selectemoji($event,value,key)"
>
<
img 
:src
="emoji_path+value"
>
span
>
div>
div>
div>
<
div 
class
="sharebtn"
:class
="flag?'sharebtnred':'sharebtngray'"
@click
="sharefn"
>分享
div>
<
div 
class
="tipbox"
v-show
="sharetip.isshow"
>
<
div 
class
="tipimg"
:class
="sharetip.type==0?'success':'warn'"
>
div>
<
span
>}
span
>
div>
div>

.edit:empty:before.edit:focus:before

遮蔽回車，貼上處理，表情處理

//

遮蔽回車
inputkeydown(event)
},//獲取輸入框內容
inputchange(e) 
else
this
.setcursorposition(curtarget);
}this.curtextlen=curtarget.innertext.length +curtarget.childelementcount;
this.content=curtarget.innerhtml;
},//輸入框處理
inputpaste(e) 
},//獲取當前游標位置
getcursorposition () ,
//設定游標位置
setcursorposition(element)
else//}
range.setstart(node,math.min(this
.sectionobj.anchoroffset,node.length));
}range.collapse(
true); //
設定選中區域為乙個點
var selection = window.getselection();//
獲取當前選中區域
selection.removeallranges();//
移出所有的選中範圍
selection.addrange(range);//
新增新建的範圍
}, 
//選擇表情
selectemoji(e,value,key) 
this.isemojishow=false
; },
//表情按鈕 顯示 隱藏
emojibtn(),

分享內容：對表情，特殊字元處理

點選分享：防止頻繁點選操作，判斷有無網

//

分享sharefn()
params=encodeuricomponent(json.stringify(params));
axios.get(''+params)
.then(res=>
else}).
catch(error=>);
},//
特殊字元轉換
converthtml:function
(msg,flag) 
else
return
msg;
},

輸入框限制輸入表情

前些日子寫專案，測試提出要求要禁止表情的錄入，在uitextfield這個 方法中shouldchangecharactersinrange，只能夠限制鍵盤上的表情不能錄入，但是錄入時聯想上的表情還是能夠錄入，所以最終用了下邊的方法，但是可能還會有問題。究其原因，測試說防止資料庫的表被注入什麼的，但...

輸入框中 禁止輸入表情

最近遇到了乙個需求，就是在設定賬號名稱中禁止輸入表情,就把該知識點整理了一下，記錄以便下次查詢.可能還有不完善之處，請各位補充。方法1 此方法個別表情識別不出來 比如我的華為手機 表情 不能識別 此方法個別表情識別不出來 比如我的華為手機 表情 不能識別 去除表情規則 u0020 u007e 標點符...

輸入框插入表情包

點選我 主要思路 當點選某個元素的時候，讓乙個輸入框，插入指定的值。1.當點選某個元素的時候，應該讓輸入框獲取焦點，因為只有獲得了焦點，才能在裡面輸入值 ie下 document.selection.createrange ff下 var start dthis.selectionstart 獲取焦...