光標出現以上佔位符和CONTENTEDITABLE格：屬性

<div contenteditable="true" id="sud"></div>

#sud 
{ 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
    position:relative; 
} 

#sud:empty:before 
{ 
    display:inline; 
    content:"hello"; 
    position:absolute; 
    top:0; left:0; 
}

能正常工作與所有瀏覽器之前，但IE10，光標出現在div以上。有人可以爲此提出解決方案嗎？光標出現以上佔位符和CONTENTEDITABLE格：屬性

的jsfiddle：該解決方案的http://jsfiddle.net/KX6BY/8/

來源

2014-04-30 sudharsanam

您必須刪除'position：absolute;' –

DEMO

缺點/優點：該解決方案將隱藏在聚焦這是不利的，但它或多或少是一個好事，因爲元素中的文本許多人使用javascript來隱藏輸入字段焦點上的佔位符文本。

詳細說明：

1）內容不應該是CSS的一部分，因此，我移離:before內容以HTML data-initial-content屬性。

2）.sud:empty:before置於初始內容內部之前僅當在div是空&當用戶集中i使用本選擇器.sud:focus:before設置:before到display:none;在div。

3）本方案不需要position: absolute。

4）還添加了overflow-y:auto &一些padding可用性&視覺效果。

來源

2014-04-30 05:30:36

通過刪除position：absolute，在IE瀏覽器中，光標會出現在content屬性的值後面。在這種情況下，它會出現在「你好」之後。 – sudharsanam

檢查我更新的答案〜在IE上測試我的新解決方案，因爲我遇到了麻煩** [IE小提琴]（http://stackoverflow.com/questions/10254266/fiddler-not-working-in-any-version- ** :( –

@ImranBughio看到[我更新的小提琴]（http://jsfiddle.net/mayankcpdixit/KX6BY/48/）。當你輸入多行文字後按回車，光標被錯位。 – mayankcpdixit

光標出現以上佔位符和CONTENTEDITABLE格：屬性

回答

相關問題