content在FireFox中可編輯光標的位置/樣式

我在使用FireFox 3中的contentEditable時遇到了問題。我遇到了一個問題，在點擊它之後光標會出現在上方或僅部分位於div中（直到我開始在哪個時間輸入它的行爲正確）。關於如何阻止這種情況發生的任何想法？content在FireFox中可編輯光標的位置/樣式

HTML：

 
<html> 
    <head><title>Test Page</title></head> 
    <body> 
    <div id="editor" style="position:absolute; left:157px; top:230px; width:120px; height:30px"> 
     <div id="input" style="width:100%; height:100%; border:1px solid black; outline:none" contentEditable="true"> </div> 
    </div> 
    </body> 
</html>

alt text

來源

2009-12-31 Ben McCann

我等待並使用僅在Firefox 4及更高版本中可編輯的內容。我提出了這個問題以及Mozilla團隊爲FF 4修復的其他一些錯誤。

來源

2010-08-03 05:57:52

你需要把某種想要編輯的DIV之間的內容或HTML：

<div id="input" style="width:100%; height:100%; border:1px solid black; outline:none" contentEditable="true">Some sort of content or HTML here.</div>

來源

2009-12-31 23:30:47 KramerC

謝謝。所以看起來只需在開始標籤和結束標籤之間加一個空格就可以編輯div。但是，我遇到了問題，我描述了光標出現在div上方/外部的位置。關於如何處理這個問題的任何想法？ – 2009-12-31 23:47:07

看來這部分是一個錯誤。這個演示會發生同樣的問題http://valums.com/wp-content/uploads/2009/10/editableText/demo/demo.htm – KramerC 2010-01-01 00:24:15

我是劍拔弩張我的大腦小時試圖找到一種方法來解決這個問題。我想到的是將編輯器封裝在默認隱藏的div中。然後使用一個內嵌的JavaScript來顯示div。這似乎使光標跳轉到正確的位置。它骯髒，但它的作品！

<div id="editor" style="display: none;"> 
    <% call RTE.renderTextArea(true) %> 
</div> 

<script>document.getElementById("editor").style.display="";</script>

來源

2010-06-06 22:39:30 WDuffy

這可以通過創建盲div並將焦點添加到它來解決，然後您的瀏覽器不專注於contenteditable元素，但用戶應該點擊它，它顯示光標在正確的地方。

$(document).ready(function(){ 
    $("#target_blind").focus(); 
}); 

<div id="target_blind" style="display:none;"></div> 
<div id="target" contenteditable="true"></div>

有一種方法，但它不能解決問題，只能讓自己變得聰明起來。

來源

2011-11-16 02:16:31 optimista

我也在最新版本的FF 22中遇到過這個問題。在我的情況下，我的外部div（例如上面的「編輯器」）沒有高度，我的光標位置低於contenteditable div。通過爲外部分區提供高度，例如height: 1.5em;，光標正確定位。

來源

2013-07-16 14:10:37 Blazes

我與Firefox 37.0.2有完全相同的問題。把在CONTENTEDITABLE的零寬度空間：before僞元素修復該問題：

.contenteditable:empty:before { 
    content: "\200B"; 
    display: inline; 
}

的修復工作在所有現代瀏覽器，包括IE11，其中也有相當類似Firefox的一個插入位置的問題。

來源

2015-05-13 11:41:59 mbaer3000

這導致在'.contenteditable'容器頂部添加一個空行當你在IE11中按下Enter鍵給我。這可以通過將'：empty'-pseudoselector應用於'.contenteditable'來解決。 – jfd 2015-07-10 11:33:54

Thx，將修正添加到代碼段中。 – mbaer3000 2015-08-03 09:31:54

content在FireFox中可編輯光標的位置/樣式

回答

相關問題