Emojione Area
是一款好用的jQuery
表情插件,大方简洁而且美观。
但是由于插件使用了contenteditable
这个属性,并且使用了::before
这个pseudo element
,导致firefox
的显示bug
。具体问题是只要鼠标再次点击这个元素,光标会移到右侧。这个bug
属于firefox
,并且在ie
内核下也可能会显示不正常,只需要google firebox contenteditable cursor
就能看到很多反应该bug
的信息。
网上给出的contenteditable
显示问题解决方法通常是给contenteditable
加上position: relative
然后给[contenteditable="true"]:empty:before
加上position: absolute
,但是这种方法会导致placeholder和光标位置异常
。
所以目前的解决办法是,给contenteditable
绑定mouseup
事件,检查如果元素处于:focus
状态且没有选中的文字,那么就运行event.preventDefault()
来阻止光标异常移动:
$('#emojione-container').emojioneArea({
pickerPosition: 'top',
filtersPosition: 'top',
useInternalCDN: false,
event: {
/**
* @param {jQuery} editor
* @param {Event} event
*/
mouseup: function(editor, event)
{
if (editor.is(':focus')) {
var sel = getSelection().toString();
if (!sel) {
event.preventDefault();
}
}
}
}
});
虽然使用了js
但是不会出现显示异常问题,有更好的解决办法欢迎交流指正。