Firefox设置错误的插入符位置contentEditable on focus [英] Firefox sets wrong caret position contentEditable on focus

问题描述

解决方案

对我来说，这只是一个问题，箱子是空的。所以我用< br> 种子了：

  $ [contenteditable ='true']。on（'focus'，function（）{
 var $ this = $（this）; 
 $ this.html（$ this.html '< br>'）; // firefox hack 
}）; 
 
 $（[contenteditable ='true']）。on（'blur'，function（）{
 var $ this = $（this）; 
 $ this .text（$ this.text（）。replace（'<。*？>'，''））; 
}）; 
  

更多信息： https://bugzilla.mozilla.org/show_bug.cgi?id=550434

playground

This is a simplified version of my problem. seems like I cannot put a positioned psuedo element inside a contentEditable and yet have the caret to be in the correct place when clicking to get focus on the DIV element.

HTML

<div contentEditable></div>

SCSS

$pad:10px;
div{ padding:$pad; border:1px solid #CCC; height:120px; position:relative; 
    &:before{ position:absolute; top:$pad; left:$pad; content:"some text"; }
}

UPDATE - FOUND THE REPORTED BUG:

please vote for this bug to be repaired - https://bugzilla.mozilla.org/show_bug.cgi?id=904846

解决方案

For me this was only a problem when the box was empty. So I seeded it with a <br>:

  $("[contenteditable='true']").on('focus', function(){
    var $this = $(this);
    $this.html( $this.html() + '<br>' );  // firefox hack
  });

  $("[contenteditable='true']").on('blur', function(){
    var $this = $(this);
    $this.text( $this.text().replace('<.*?>', '') );
  });

More info here: https://bugzilla.mozilla.org/show_bug.cgi?id=550434

这篇关于Firefox设置错误的插入符位置contentEditable on focus的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！