Firefox的設置上注重

playground

錯插入位置CONTENTEDITABLE這是我的問題的一個簡化版本。好像我不能在contentEditable中放置一個定位的psuedo元素，並且在單擊以獲得DIV元素的焦點時，將插入符號放在正確的位置。Firefox的設置上注重

enter image description here

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"; } 
}

更新 - 發現報告中的BUG：

請投票支持這個bug被修復 - https://bugzilla.mozilla.org/show_bug.cgi?id=904846

來源

2014-02-24 vsync

似乎是一個老問題：http://stackoverflow.com/questions/1987435/contenteditable-cursor-position-style- in-firefox –

我仍然注意到它。 – Dex

@Dex--那是因爲他們沒有修復它......如果你關心這個，你應該「明星」。有一個鏈接到我的問題中報告的錯誤（底部） – vsync

將:after元素設置爲絕對時存在問題。我無法弄清楚爲什麼。但如果你把它放在相對的位置，問題就沒有了。

我已經更新了你的提琴：http://jsfiddle.net/NicoO/Lt3Wb/1/

這裏是新的CSS（有一些實驗性增加）

$pad:10px; 

div{ 
    padding:$pad; 
    border:1px solid #CCC; 
    height:120px; 
    position:relative; 

&:before 
{ 
    position:relative; 
    color:#999; 
    content:"Write a comment..."; 
} 
} 

div:focus 
{ 
    border-color: red; 
} 

div:not(:empty):before{ 
    display: none; 
}

剩下唯一的問題是，您可以專注的文字背後:before元素。這就是你爲什麼要絕對的原因。交互也：如果您將僞元素設置爲float: left;，它將顯示與position:absolute;上相同的行爲。

更新

當你不得不使用上peseudo元素絕對的，似乎是目前唯一的一個解決方案。只要它是空的和專注的，爲盒子定義另一個填充。遊樂場：http://jsfiddle.net/NicoO/Lt3Wb/5/

$pad:10px; 
#test 
{ 
    padding: $pad; 
    border:1px solid #CCC; 
    height:120px; 
    position:relative; 
    overflow: hidden; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;  

    &:empty:focus 
    { 
     padding: #{($pad*2)+6} $pad; 
    } 

    &:before 
    { 
     position:absolute; 
     color:#999; 
     top: $pad; 
     left: $pad; 
     content: "Leave a comment" 
    } 
}

來源

2014-02-24 12:14:14

不，我必須是絕對的。必須。（畢竟這是我的問題的簡化版本）。這是一個瘋狂的FF bug .. – vsync

好吧，我會試試它的參數。一個問題：你什麼時候想刪除：before元素？如果可以集中注意力，畢竟沒有問題。 –

它應該淡出。沒有消失。這是我想在這裏避免的事情。只有淡出。 – vsync

一個解決這個問題的是包裝一個DIV裏面的內容編輯，並給這個div固定的高度。

也就是說，如果你有這樣的配置：

<div id="wrapper"> 
    <div contentEditable></div> 
</div>

那麼CSS可以是以下：

#wrapper { 
    width: 240px; 
    height: 70px; 
    margin: 0 20px 0; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 

#wrapper div[contenteditable=true] { 
    width: 100%; 
    min-height: 35px; /* Not mandatory */ 
    padding: 8px; 
}

來源

2014-10-23 11:04:36

對我來說，這只是一個問題，當箱子是空的。所以，我有<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

來源

2015-01-15 04:19:47 Dex

Firefox的設置上注重

playground

HTML

SCSS

更新 - 發現報告中的BUG：

回答

相關問題