कोई आदर्श समाधान नहीं है लेकिन कर्सर को बीच में दिखाई देने के लिए :empty तत्व पर 50% के padding-left को लागू करके हम नकली प्रभाव डाल सकते हैं।
और उसके बाद पूर्ण स्थिति और translateX परिवर्तन फ़ंक्शन का नकारात्मक मान का उपयोग करके प्लेसहोल्डर (छद्म-तत्व) को बीच में संरेखित करें।
* {
margin: 0;
padding: 0;
}
@-moz-document url-prefix() { /* CSS Hack to fix the position of cursor on FF */
[contentEditable=true]:empty {
padding-top: 1em;
padding-bottom: .25em;
-moz-box-sizing: content-box;
}
}
[contentEditable=true]:empty {
padding-left: 50%;
text-align: left; /* Fix the issue on IE */
}
[contentEditable=true]:empty::before{
content:attr(data-ph);
color: #CCC;
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
h1 {
text-align: center;
position: relative;
}
<h1 contenteditable="true" data-ph="Name"></h1>
केवल समस्या यह है कि रहता है - के रूप में ओ पी द्वारा प्रदान किए गए कोड में देखा जा सकता - यह है कि Firefox पर, एक खाली <br> तत्व contentEditable तत्व है जो का कारण बनता है :empty छद्म वर्ग नहीं में जोड़ा जाता है अब तत्व से मेल खाते हैं। इसलिए प्लेसहोल्डर को बहाल नहीं किया जाएगा।
हालांकि चूंकि कर्सर की स्थिति के बारे में सवाल है, मुझे लगता है कि यह व्यवहार ओपी के लिए ठीक है।
स्रोत
2015-03-26 21:23:00
दिलचस्प बात यह है कि IE11 में कर्सर सामग्री के अंत में शुरू होता है, क्रोम और फ़ायरफ़ॉक्स इसे बाएं-गठबंधन प्रस्तुत करता है। क्रोम एक नीली सीमा भी दिखाता है जहां अन्य दो नहीं करते हैं। – adamdc78