使用Emojione Area在Firefox下光标异常的解决方法

Emojione Area是一款好用的jQuery表情插件,大方简洁而且美观。
Emojione Area

但是由于插件使用了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但是不会出现显示异常问题,有更好的解决办法欢迎交流指正。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值