如何將光標位置放置在contenteditable元素的中心對齊的佔位符的起始處？

我有下面的代碼：如何將光標位置放置在contenteditable元素的中心對齊的佔位符的起始處？

HTML：

<div class="title" contenteditable="true" placeholder="Title"></div>

CSS：

.title { 
    width: 500px; 
    margin: 0 auto; 
    text-align: center; 
} 

[contenteditable=true]:empty:before{ 
    content: attr(placeholder); 

}

它導致一個佔位符中心對齊編輯股利。我的問題是，當元素第一次聚焦時，光標位於div的開始位置，而不是佔位符的位置：！ http://screencast.com/t/66HWb3wKiV

我希望佔位符保持可見狀態，直到字符實際輸入爲止，並且光標位於佔位符的開頭。我將如何能夠做到這一點？

謝謝！

來源

2014-10-19 user2833021

重複的http://stackoverflow.com/questions/25304708/center-cursor-on-focus-in-div-contenteditable-centered-horizontally-and-vertica – 2014-10-20 09:10:20

@Burn不幸的是，代碼不適用於佔位符。我遇到的問題是，直到鍵入鍵（或某些文本已經存在），光標才居中。我的問題是讓它在此之前居中，當它首次聚焦時，顯示一個佔位符。 – user2833021 2014-10-20 13:18:52

很長時間，但我在這裏發佈了一個類似問題的答案：http://stackoverflow.com/questions/29288975/centering-the-placeholder-caret-in-contenteditable-element - 你可能會發現它有幫助。 – 2015-03-26 23:04:28

我對這個問題有一個解決方法。

改變你的CSS：

.title { 
    width: 500px; 
    margin: 0 25%; 
}

來源

2015-03-03 05:34:10

如何將光標位置放置在contenteditable元素的中心對齊的佔位符的起始處？

回答

相關問題