<इनपुट प्रकार = "टेक्स्ट" /> में इनपुट की कई लाइनें

Question

मेरे पास यह टेक्स्ट इनपुट एक फॉर्म में है:

<input type="text"
       cols="40" 
       rows="5" 
       style="width:200px; height:50px;" 
       name="Text1" 
       id="Text1" 
       value="" />

मैं इसे इनपुट की कई लाइनें लेने की कोशिश कर रहा हूं। चौड़ाई और ऊंचाई बॉक्स को बड़ा बनाते हैं, लेकिन उपयोगकर्ता टेक्स्ट को सभी में दर्ज कर सकता है, वह अभी तक केवल एक पंक्ति भरता है।

मैं कैसे एक textarea की तरह इनपुट अधिक कर सकते हैं?

Answer 1

मल्टीलाइन हैंडलिंग प्राप्त करने के लिए आपको एक टेक्स्टारिया का उपयोग करने की आवश्यकता है।

<textarea name="Text1" cols="40" rows="5"></textarea>

Comments

और textarea टैग स्व-समापन नहीं हो सकता। <textarea \>अमान्य है।

— एलेक्स एच

textaleea की परवाह किए बिना @alexH, यह गलत स्लैश है। मूल उत्तर में स्व-समापन था, लेकिन कम से कम यह सही स्लैश था।

— एडम

@ मुझे पता है, लेकिन मैं किसी भी अधिक संपादित नहीं कर सकता। और मैं इसे हटाना नहीं चाहता, क्योंकि मेरी राय में आत्म-समापन हिस्सा महत्वपूर्ण है।

— एलेक्स एच

हां, लेकिन, विशेषता का textareaसमर्थन नहीं करता है pattern। तो डार।

— टोडडोमो

मुझे इस बारे में पसंद नहीं है कि JQuery में, आप textarea मान का उपयोग करके सेट नहीं कर सकते val()। आपको appendइसे करना है। :(

— मैल्कम सल्वाडोर

Answer 2

इसे word-break: break-word;विशेषता देकर टेक्स्ट-इनपुट मल्टी-लाइन बनाना संभव है । (केवल क्रोम में इसका परीक्षण किया गया)

Comments

धन्यवाद! मैंने देखा कि क्रोम इनपुट्स के लिए कई लाइनों की अनुमति दे रहा था, जो मैं पूरी तरह से नहीं करना चाहता था, और इसका कारण शब्द-विराम था जो शरीर के तत्व से विरासत में मिला था

— रैप

Chrome 39 और Safari 8.0.2 में अच्छा लग रहा है, लेकिन मेरे संक्षिप्त परीक्षण में फ़ायरफ़ॉक्स 34 नहीं है। :( jsfiddle.net/msybs9g7

— जेरेमी वाधम्स

मुझे लगता है कि यह अब क्रोम में काम नहीं कर रहा है।

— फिफी

Answer 3

आप नहीं कर सकते। लेखन के समय, केवल HTML फॉर्म एलिमेंट जिसे मल्टी-लाइन होने के लिए डिज़ाइन किया गया है <textarea>।

Answer 4

टेक्सारिया का प्रयोग करें

<textarea name="textarea" style="width:250px;height:150px;"></textarea>

खुलने और बंद होने वाले टैग या एल्स के बीच कोई स्थान न छोड़ें यह कुछ खाली लाइनों या रिक्त स्थान को छोड़ देगा।

Answer 5

इसे देखो:

• http://www.w3.org/TR/html401/interact/forms.html#h-17.7

TEXTAREA तत्व एक बहु-पंक्ति पाठ इनपुट नियंत्रण बनाता है

Answer 6

आपको textareaकई-लाइन इनपुट का समर्थन करने के लिए उपयोग करना चाहिए ।

<textarea rows="4" cols="50">
Here you can write some text to display in the textarea as the default text
</textarea>

Answer 7

यदि आपको ऑटो ऊंचाई के साथ टेक्सारिया की आवश्यकता है , तो शुद्ध जावास्क्रिप्ट के साथ उपयोग करें,

function auto_height(elem) {  /* javascript */
    elem.style.height = "1px";
    elem.style.height = (elem.scrollHeight)+"px";
}

.auto_height { /* CSS */
  width: 100%;
}

<textarea rows="1" class="auto_height" oninput="auto_height(this)"></textarea>

Answer 8

इनपुट कई लाइनों का समर्थन नहीं करता है। आपको उस सुविधा को प्राप्त करने के लिए एक textarea का उपयोग करने की आवश्यकता है ।

<textarea name="Text1"></textarea>

---

याद रखें कि <textarea>है टैग के अंदर मूल्य विशेषता में नहीं,:

<textarea>INITIAL VALUE GOES HERE</textarea>

इसे स्वयं बंद नहीं किया जा सकता है: <textarea/>

---

अधिक जानकारी के लिए, इस पर एक नज़र डालें ।

Answer 9

यदि आप React का उपयोग कर रहे हैं, तो पुस्तकालय सामग्री-ui.com आपकी सहायता कर सकती है:

  <FormControl>
    <InputLabel htmlFor="textContract">{`textContract`}</InputLabel>
    <Input
      id="textContract"
      multiline
      rows="30"
      type="text"
      value={props.textContract}
      onChange={() => {}}
    />
  </FormControl>

https://material-ui.com/components/text-fields/#multiline

Answer 10

के लिए भंडारण के साथ <div contenteditable="true">( अच्छी तरह से समर्थित ) का उपयोग करें <input type="hidden">।

HTML:

<div id="multilineinput" contenteditable="true"></div>
<input type="hidden" id="detailsfield" name="detailsfield">

js (jQuery का उपयोग करके)

$("#multilineinput").on('keyup',function(e) {   
    $("#detailsfield").val($(this).text()); //store content to input[type=hidden]
});
//optional - one line but wrap it
$("#multilineinput").on('keypress',function(e) {    
    if(e.which == 13) { //on enter
        e.preventDefault(); //disallow newlines     
        // here comes your code to submit
    }
});