मैं एक div साथ एक संपादन योग्य शरीर है:सीएसएस को कैसे रोकें ': टेक्स्ट' संपादन योग्य होने पर पहले 'div` संपादन योग्य है?
<body contenteditable="true">
<div class="paragraph">Text</div>
<body/>
और एक :before शैली:
div.paragraph:before {
content: "☑";
}
फिडल: http://jsfiddle.net/uy9xs5p0/
Firefox में मैं पाठ की शुरुआत में कर्सर डाल सकते हैं और बैकस्पेस दबाएं और चेक मार्क हटा दिया जाता है। इसे कैसे रोकें?
आप माता पिता div में contenteditable सेट कर रहे हैं, इसलिए जब मिटाकर, आप div.paragraph हटा रहे हैं, तो छद्म चला जाएगा।
देखें कि यदि आप इसके बजाय बच्चे div में संपत्ति सेट करते हैं, तो आप इसे काम कर सकते हैं।
div.paragraph:before {
content: "☑";
}<div>
<div contenteditable="true" class="paragraph">Text</div>
</div>आप :before सामग्री संपादित नहीं कर रहे हैं।
यह खाली होने के बाद पूरे .paragraph तत्व को हटा देता है, या यदि आप टैग की शुरुआत में बैकस्पेस करते हैं।
फ़ायरफ़ॉक्स में इसे खाली नहीं होना चाहिए, वह टिक –
को हटा सकता है टेक्स्ट टेक्स्ट "टेक्स्ट" पहले टेक्स्ट को हटा दिए जाने के बाद भी है। – ceving
हां, लेकिन यह 'पहले' की सामग्री को नहीं हटाता है, यह लपेटा हुआ div हटा देता है। –
जब यह समस्या पुन: उत्पन्न होती है, (उदाहरण के लिए this fiddle के माध्यम से) डेवलपर टूल दिखाते हैं कि div.paragraph हटा दिया गया है। केवल एक पाठ नोड बना रहता है।
हो जाता है निकाले जाने से div रोकने के लिए, अपनी मूल contenteditable देना नहीं है। बजाय इस का उपयोग करें:
<body>
<div class="paragraph" contenteditable="true">Text</div>
</body>
यह स्वीकार्य उत्तर होना चाहिए। आपने दूसरे उत्तर से पहले 2 मीटर का उत्तर दिया। –
संभावित समाधान, इस समस्या। ऐसा लगता है कि आप काम करना चाहते हैं।
<div contenteditable="true" class="upper-div">
<div class="paragraph">Text</div>
</div>
div.upper-div:before {
content: "☑";
display:inline-block;
}
.paragraph{display:inline-block;}
आपका सुझाव चेक बॉडी को बाहरी निकाय में ले जाता है। मुझे प्रत्येक div पर चेक मार्क की आवश्यकता है, न केवल शरीर के लिए। – ceving
अन्य उत्तरों समस्या की व्याख्या करते हैं। यदि div अपने माता-पिता से इसकी संपादन क्षमता प्राप्त करता है, तो बच्चे को div स्वयं और div से पहले सामग्री को हटा देना संभव है।
इसे रोकने के लिए, यह आवश्यक है कि संपादन योग्य div संपादन योग्य माता-पिता में नहीं रखा जाना चाहिए। यह संपादन योग्य बच्चे div को संरक्षित करने के लिए प्रत्येक संपादन योग्य div को एक संपादन योग्य पेरेंट div में रखना आवश्यक बनाता है।
निम्न उदाहरण इस
div.node {
margin-left: 1em;
}
div.paragraph:before {
content: "☑";
}<div contenteditable="false" class="node">
<div contenteditable="true" class="paragraph">Major</div>
<div contenteditable="false" class="node">
<div contenteditable="true" class="paragraph">Minor</div>
</div>
</div>
आप अपने html संशोधित करने में सक्षम हैं? – Mooseman
यह एक अजीब और दिलचस्प मामला है। क्या आपने (मोज़िला-विशिष्ट) [-मोज़-उपयोगकर्ता-संशोधित] (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-modify) का उपयोग करने की कोशिश की है ' : before'? – Boldewyn
एचएम, काम नहीं करता है: http://jsfiddle.net/eezsgc62/ – Boldewyn