मैं एक संपादन योग्य DIV को टेक्स्ट फ़ील्ड की तरह कैसे बना सकता हूं?

Question

मुझे एक मिला है DIVजिससे contentEditable=trueउपयोगकर्ता इसे संपादित कर सकता है। समस्या यह है कि यह एक पाठ क्षेत्र की तरह नहीं दिखता है, इसलिए यह उपयोगकर्ता के लिए स्पष्ट नहीं हो सकता है कि इसे संपादित किया जा सकता है।

क्या कोई ऐसा तरीका है जिससे मैं शैली कर सकता हूं DIVताकि यह उपयोगकर्ता को टेक्स्ट इनपुट फ़ील्ड की तरह दिखाई दे?

Comments

पृष्ठभूमि: सफेद; बॉर्डर: 1px ठोस # 666; कर्सर: पाठ; ? : P मेरा डेमो

— mkk

मुझे लगता है कि यह एक की तरह लग रहे हो textarea? jsfiddle.net/vwPgT

— Jared Farrish

@mkk - अगर आपने कुछ सैंपल टेक्स्ट जोड़ा है तो थोड़ी मदद कर सकते हैं : jsfiddle.net/ZevvE/1

— जेरेड फरिश

@ जारेड :) अच्छा काम! ;-) अब इसे डिव के साथ भ्रमित करना बहुत कठिन है .. ओह यह डिव है, मैं भूल गया :)

— mkk

@mkk - मैं व्यक्तिगत रूप से लगता है कि मेरी डेमो स्पष्ट है, लेकिन हे, यह क्या बात है है।

— जेरेड फरिश

Answer 1

ये सफारी, क्रोम और फ़ायरफ़ॉक्स में अपने वास्तविक समकक्षों के समान दिखते हैं। वे इनायत से नीचा दिखाते हैं और ओपेरा और IE9 में भी ठीक दिखते हैं।

डेमो: http://jsfiddle.net/ThinkingStiff/AbKTQ/

सीएसएस:

textarea {
    height: 28px;
    width: 400px;
}

#textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

input {
    margin-top: 5px;
    width: 400px;
}

#input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;  
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
    width: 398px;    
}

HTML:

<textarea>I am a textarea</textarea>
<div id="textarea" contenteditable>I look like textarea</div>

<input value="I am an input" />
<div id="input" contenteditable>I look like an input</div>

आउटपुट:

Comments

वास्तव में -webkit-small-control और मध्यम -मोज़-फिक्स्ड क्या करता है? वे फॉन्ट फ़ायरफ़ॉक्स v13.0 में Monospaced देखो बनाने के लिए लग रहे हैं

— Hengjie

@Hengjie वे डिफ़ॉल्ट शैलियाँ हैं जो इनपुट फ़ील्ड प्रदर्शित करते समय ब्राउज़र का उपयोग करते हैं।

— ThinkingStiff

यहाँ एक usecase है, उनमें कॉपी पेस्ट HTML सामग्री करने की कोशिश करें। आपको फर्क दिखाई देगा।

— प्रवीण

भी जोड़ना चाहिए - पृष्ठभूमि: सफेद;

— ब्रांता

क्या होगा अगर मैं इस div के अंदर एक और div चाहता हूं, जो मैं इसे संपादन योग्य नहीं बनाना चाहता हूं?

— FrenkyB

Answer 2

यदि आप बूटस्ट्रैप का उपयोग करते हैं तो बस form-controlक्लास जोड़ें । उदाहरण के लिए:

class="form-control" 

Comments

यह एक शानदार जवाब है और मुझे लगता है कि यह सबसे साफ है। मेरा वोट इसके लिए सही जवाब है।

— आहट

उपयोगकर्ता को क्षेत्र का विस्तार करने की अनुमति देने का कोई तरीका? सामान्य बनावट यह करता है।

— MARS

Answer 3

WebKit में, आप यह कर सकते हैं: -webkit-appearance: textarea;

Comments

खैर, यह बहुत सुविधाजनक है।

— जेरेड फरिश

Answer 4

आप एक आंतरिक बॉक्स छाया के लिए जा सकते हैं:

div[contenteditable=true] {
  box-shadow: inset 0px 1px 4px #666;
}

मैंने जारिश से jsfiddle को अपडेट किया: http://jsfiddle.net/ZevvE/2/

Answer 5

मैं इसे Chrome की शैली से मेल खाने के लिए सुझाव दूंगा, जो कि Jarish के उदाहरण से विस्तारित है। कर्सर संपत्ति पर ध्यान दें जो पिछले उत्तर छोड़ चुके हैं।

cursor: text;
border: 1px solid #ccc;
font: medium -moz-fixed;
font: -webkit-small-control;
height: 200px;
overflow: auto;
padding: 2px;
resize: both;
-moz-box-shadow: inset 0px 1px 2px #ccc;
-webkit-box-shadow: inset 0px 1px 2px #ccc;
box-shadow: inset 0px 1px 2px #ccc;

Answer 6

इन सभी के साथ समस्या यह है कि यदि पाठ की पंक्तियाँ लंबी और बहुत अधिक चौड़ी हैं तो उन्हें संबोधित नहीं किया जाता है: div अतिप्रवाह: ऑटो एक स्क्रॉल बार का विज्ञापन नहीं करता है जो सही काम करता है। यहाँ सही समाधान मैंने पाया है:

दो divs बनाएँ। एक आंतरिक div जो कि टेक्स्ट की सबसे चौड़ी लाइन को संभालने के लिए पर्याप्त चौड़ी है और फिर एक छोटी बाहरी होती है जो आंतरिक div के लिए धारक पर कार्य करती है:

<div style="border:2px inset #AAA;cursor:text;height:120px;overflow:auto;width:500px;">
    <div style="width:800px;">

     now really long text like this can be put in the text area and it will really <br/>
     look and act more like a real text area bla bla bla <br/>

    </div>
</div>

Answer 7

आप अपने DIV के नीचे समान आकार का एक TEXTAREA रख सकते हैं, इसलिए मानक नियंत्रण का ढांचा div के आसपास दिखाई देगा।

आकस्मिक ध्यान चोरी को रोकने के लिए, इसे अक्षम करने के लिए सेट करना अच्छा है।

Comments

हाँ, यह निश्चित नहीं है कि ओपी जवाब में क्या देख रहा है।

— जेरेड फरिष

यदि आप चाहते हैं कि टेक्स्टफील्ड को div की सामग्री के साथ स्वचालित रूप से स्केल करना है तो यह कठिन हो रहा है।

— टाइमिंग