क्या आप <textarea> में HTML5 प्लेसहोल्डर टेक्स्ट को मल्टीलाइन कर सकते हैं?

Question

जब आप HTML5 के प्लेसहोल्डर विशेषता का उपयोग करते हुए उन पर ध्यान केंद्रित करते हैं, तो मेरे पास टेक्स्ट फ़ील्ड में भूत पाठ है:

<input type="text" name="email" placeholder="Enter email"/>

मैं एक textarea में बहु प्लेसहोल्डर पाठ के लिए उसी तंत्र का उपयोग करना चाहते हैं, शायद कुछ इस तरह:

<textarea name="story" placeholder="Enter story\n next line\n more"></textarea>

लेकिन वे \nपाठ में दिखाई देते हैं और नए कारण नहीं बनाते हैं ... क्या एक बहुभाषी प्लेसहोल्डर होने का एक तरीका है?

अद्यतन : मुझे काम करने का एकमात्र तरीका jQuery वॉटरमार्क प्लगइन का उपयोग करना था, जो प्लेसहोल्डर में HTML को स्वीकार करता है:

$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false});

Comments

IE इसे ठीक से संभालने के लिए लगता है। फ़ायरफ़ॉक्स

— ओटीओएच

stackoverflow.com/questions/7312623/… बहुत अच्छे सवालों के साथ भी ऐसा ही सवाल है।

— लॉयड डेवुल्फ़

यदि आप इसका सामना कर रहे हैं और white-spaceयह सुनिश्चित करने के लिए कि यह सही ढंग से सेट है, तो प्री-रैप

— Cory Mawhorter

उस अन्य प्रश्न से: 
सफारी को छोड़कर हर जगह काम करता है।

— स्फिंक्स

Answer 1

के लिए <textarea>रों कल्पना विशेष रूप से की रूपरेखा प्लेसहोल्डर विशेषता में है कि कैरिएज रिटर्न + पंक्ति विराम ब्राउज़र द्वारा लाइनब्रेक के रूप में प्रदान किया जाना चाहिए।

उपयोगकर्ता एजेंटों को उपयोगकर्ता को यह संकेत तब पेश करना चाहिए जब तत्व का मूल्य खाली स्ट्रिंग है और नियंत्रण केंद्रित नहीं है (उदाहरण के लिए इसे खाली अनफ़ोकस्ड नियंत्रण के अंदर प्रदर्शित करके)। संकेत में सभी U + 000D CARRAGE RETURN U + 000A LINE FEED चरित्र जोड़े (CRLF), साथ ही संकेत में अन्य सभी U + 000D CARRAGE RETURN (CR) और U + 000AINE FEED (LF) अक्षर होने चाहिए। संकेत देते समय रेखा टूट जाती है।

MDN पर भी प्रतिबिंबित: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

FWIW, जब मैं क्रोम 63.0.3239.132 पर कोशिश करता हूं, यह वास्तव में काम करता है जैसा कि यह कहना चाहिए।

Comments

सिवाय इसके कि शीर्षक विशेषता उसी तरह का व्यवहार नहीं करती है अर्थात यह भूत की सामग्री नहीं दिखाती है। वास्तव में यह प्लेसहोल्डर्स के लिए पूरी तरह से उपयुक्त होगा कि वे टेक्स्ट क्षेत्रों के लिए कई लाइनों का समर्थन करें क्योंकि टेक्स्ट क्षेत्र मल्टी-लाइन जीव हैं। दया की कल्पना यह अनुमति नहीं देता है। मुझे लगता है कि हैक्स को करना होगा। sigh

— ekkis

Answer 2

पर सबसे ब्राउज़रों (विवरण नीचे देखें), संपादन जावास्क्रिप्ट में प्लेसहोल्डर बहु प्लेसहोल्डर अनुमति देता है। जैसा कि कहा गया है, यह विनिर्देश के अनुरूप नहीं है और आपको इसे भविष्य में काम करने की उम्मीद नहीं करनी चाहिए (संपादित करें: यह काम नहीं करता है)।

यह उदाहरण सभी बहु-पाठ बनावट के प्लेसहोल्डर की जगह लेता है ।

var textAreas = document.getElementsByTagName('textarea');

Array.prototype.forEach.call(textAreas, function(elem) {
    elem.placeholder = elem.placeholder.replace(/\\n/g, '\n');
});

<textarea class="textAreaMultiline" 
          placeholder="Hello, \nThis is multiline example \n\nHave Fun"
          rows="5" cols="35"></textarea>

_{JsFiddle स्निपेट।}

अपेक्षित परिणाम

---

टिप्पणियों के आधार पर ऐसा लगता है कि कुछ ब्राउज़र इस हैक को स्वीकार करते हैं और अन्य नहीं करते हैं।
यह परीक्षण मैं भागा के परिणाम (साथ है browsertshots और browserstack )

• क्रोम:> = 35.0.1916.69
• फ़ायरफ़ॉक्स: = = 35.0 (प्लेटफ़ॉर्म पर परिणाम भिन्न होता है)
• आईई:> = 10
• KHTML आधारित ब्राउज़र: 4.8
• सफारी: नहीं (परीक्षण = सफारी 8.0.6 मैक ओएस एक्स 10.8)
• ओपेरा: नहीं (परीक्षण किया गया <= 15.0.1147.72)

थिसिस आंकड़ों के साथ जुड़े , इसका मतलब है कि यह वर्तमान में (अक्टूबर 2015) के लगभग 88.7% ब्राउज़रों पर काम करता है।

अपडेट : आज, यह वर्तमान में (जुलाई 2018) उपयोग किए गए ब्राउज़रों में से कम से कम 94.4% पर काम करता है।

Comments

यह jsfiddle उदाहरण बिल्कुल काम नहीं करता है ... यह केवल बहुस्तरीय है क्योंकि बनावट का आकार।

— 17

एक टाइपो है, लेकिन मैं संपादित नहीं कर सकता क्योंकि StackOverflow मुझे यह "संपादन कम से कम 6 वर्ण" त्रुटि होना चाहिए। आपकी कक्षा multilineनहीं होनी चाहिएmultiligne

— डेनियल लौरेइरो

@sebnukem: यह अधिकांश ब्राउज़रों पर काम करता है जिनकी मैंने जांच की थी। और यह textarea के आकार की बात नहीं है। क्या आप इस मुद्दे पर अधिक जानकारी प्रदान कर सकते हैं?

— सिरबिल

सफारी पर काम नहीं करता है ऐसा लगता है ... - \ n गायब हो जाता है, लेकिन सब कुछ एक ही लाइन पर है

— हैकरन

@ जारोन्क: मैं इसकी पुष्टि कर सकता हूं। यह क्रोम के कारण नहीं है, बल्कि Apple को किसी भी ब्राउज़र को अपने IOS का उपयोग करने के लिए मजबूर करता है WKWebView। इसके बाद, IOS पर कोई भी ब्राउज़र इस हैक को तब तक ठीक से रेंडर नहीं करेगा WKWebView।

— सिरबिल

Answer 3

मुझे लगता है कि यदि आप बहुत सारे रिक्त स्थान का उपयोग करते हैं, तो ब्राउज़र इसे ठीक से लपेट देगा। रिक्त स्थान की एक सटीक संख्या का उपयोग करने के बारे में चिंता न करें, बस वहां बहुत कुछ फेंक दें, और ब्राउज़र को अगली पंक्ति में पहले गैर अंतरिक्ष चरित्र से ठीक से लपेटना चाहिए।

<textarea name="address" placeholder="1313 Mockingbird Ln         Saginaw, MI 45100"></textarea>

Comments

हां मल्टीलाइन प्लेसहोल्डर्स क्रॉसब्रोसर समर्थित नहीं हैं, ने पाया है कि नवीनतम सफारी समर्थन करता है लेकिन निश्चित रूप से IOS5 पर समर्थित नहीं है

— टॉम

यह मेरे लिए न तो IE और न ही फ़ायरफ़ॉक्स विंडोज में काम नहीं करता है। यह उन जगहों को सम्मिलित करता है जिन्हें मैंने इसके लिए कहा था

— ekkis

Chrome 37 एक टेक्स्टारिया में प्लेसहोल्डर पाठ को प्रदर्शित कर रहा है, जिसमें नई रूपरेखाएँ नहीं हैं। क्या किसी को पता है कि 'फ़ीचर' का नाम क्या है ताकि मैं इसके लिए देख सकूं और बी) इसके लिए परीक्षण कर सके?

— बेन

Answer 4

वास्तविक रूप से एक हैक है जो वेबकिट ब्राउज़र में मल्टीलाइन प्लेसहोल्डर्स को जोड़ना संभव बनाता है, क्रोम काम करता था लेकिन हाल के संस्करणों में इसे हटा दिया गया:

---

सबसे पहले अपने प्लेसहोल्डर की पहली लाइन को html5 में हमेशा की तरह जोड़ें

<textarea id="text1" placeholder="Line 1" rows="10"></textarea>

फिर सीएसएस द्वारा शेष पंक्ति जोड़ें:

#text1::-webkit-input-placeholder::after {
    display:block;
    content:"Line 2\A Line 3";
}

---

यदि आप अपनी लाइनों को एक स्थान पर रखना चाहते हैं, तो आप निम्नलिखित का प्रयास कर सकते हैं। इसका नकारात्मक पहलू यह है कि क्रोम, सफारी, वेबकिट-आदि के अलावा अन्य ब्राउज़र। पहली पंक्ति भी न दिखाएं:

<textarea id="text2" placeholder="." rows="10"></textarea>​

फिर सीएसएस द्वारा शेष पंक्ति जोड़ें:

#text2::-webkit-input-placeholder{
    color:transparent;
}

#text2::-webkit-input-placeholder::before {
    color:#666;
    content:"Line 1\A Line 2\A Line 3\A";
}

---

डेमो फिडल

यह बहुत अच्छा होगा, अगर ऐसा ही फ़ायरफ़ॉक्स पर काम करने वाला एक डेमो मिल सकता है।

Comments

फिडल लिंक प्रदान करने के लिए धन्यवाद। यह विभिन्न ब्राउज़रों में व्यवहार को सत्यापित करना आसान बनाता है। IE 10 पर दोनों संस्करण विफल होते हैं, साथ ही साथ एफएफ 12 (विंडोज) पर भी। अफ़सोस की बात है कि। सफारी 6.1 काम करता है :(

— ekkis

अब क्रोम में काम नहीं करता है - एक लंबे समय के लिए, अब मैं मान लूंगा।

— माइक रॉकएट

Answer 5

यदि आप AngularJS का उपयोग कर रहे हैं, तो आप बस ब्रेसिज़ का उपयोग उस स्थान पर कर सकते हैं जो आप इसमें करना चाहते हैं: यहाँ एक फ़िडल है।

<textarea rows="6" cols="45" placeholder="{{'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}}"></textarea>

Comments

मैं इसी तरह के दृष्टिकोण का उपयोग कर रहा हूं, लेकिन यह

— स्टेन

Answer 6

एमडीएन के अनुसार ,

प्लेसहोल्डर पाठ के भीतर कैरिज रिटर्न या लाइन-फीड को संकेत देते समय लाइन ब्रेक के रूप में माना जाना चाहिए।

इसका मतलब है कि यदि आप एक नई लाइन पर कूदते हैं, तो इसे सही तरीके से प्रस्तुत किया जाना चाहिए। अर्थात

<textarea placeholder="The car horn plays La Cucaracha.
You can choose your own color as long as it's black.
The GPS has the voice of Darth Vader.
"></textarea> 

इस तरह प्रस्तुत करना चाहिए:

Answer 7

एचटीएमएल 5 कल्पना स्पष्ट रूप से स्थान धारक क्षेत्र में नई लाइनों को खारिज कर दिया। प्लेसहोल्डर में लाइन फीड के साथ प्रस्तुत किए जाने पर वेबकिट के संस्करण / विल / नई लाइनें डालेंगे, हालांकि यह गलत व्यवहार है और इस पर भरोसा नहीं किया जाना चाहिए।

मुझे लगता है कि पैराग्राफ w3 के लिए पर्याप्त संक्षिप्त नहीं हैं;)

Comments

वेबकिट का व्यवहार गलत नहीं है क्योंकि विनिर्देश यह नहीं कहता है कि क्या होना चाहिए अगर सीआर / एलएफ मौजूद है।

— क्रिश्चियन

@Christian अब यह कहता है, "उपयोगकर्ता एजेंटों को उपयोगकर्ता को इस संकेत को प्रस्तुत करना चाहिए, छीनने के बाद लाइन टूटने से ..."। यह स्ट्रिपिंग लाइन ब्रेक के बारे में यह कहता है: "जब एक उपयोगकर्ता एजेंट स्ट्रिंग से लाइन ब्रेक करने के लिए होता है, तो उपयोगकर्ता एजेंट को उस स्ट्रिंग से किसी भी" LF "(U + 000A) और" CR "(U + 000D) वर्णों को हटाना होगा। "।

— रिचर्ड टर्नर

यह उत्तर अब सत्य नहीं है। कल्पना अब स्पष्ट रूप से की आवश्यकता है कि प्लेसहोल्डर में लाइनब्रेक लाइनब्रेक के रूप में प्रदान की जा।

— क्लोन्सेक्स

Answer 8

प्रतिक्रिया:

यदि आप प्रतिक्रिया का उपयोग कर रहे हैं, तो आप इसे निम्नानुसार कर सकते हैं:

placeholder={'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}

Answer 9

यदि आपकी textareaस्थैतिक चौड़ाई है, तो आप गैर-ब्रेकिंग स्पेस और स्वचालित टेक्सारिया रैपिंग के संयोजन का उपयोग कर सकते हैं। बस हर पंक्ति के लिए रिक्त स्थान बदलें और सुनिश्चित करें कि दो पड़ोसी लाइनें एक में फिट नहीं हो सकती हैं। व्यवहार में line length > cols/2।

यह सबसे अच्छा तरीका नहीं है, लेकिन केवल क्रॉस-ब्राउज़र समाधान हो सकता है।

<textarea class="textAreaMultiligne" 
          placeholder="Hello,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This&nbsp;is&nbsp;multiligne&nbsp;example Have&nbsp;Fun&nbsp;&nbsp;&nbsp;&nbsp;"
          rows="5" cols="35"></textarea>

Answer 10

आप CSS का उपयोग करके देख सकते हैं, यह मेरे लिए काम करता है। यहां विशेषता placeholder=" "की आवश्यकता है।

<textarea id="myID" placeholder=" "></textarea>
<style>
#myID::-webkit-input-placeholder::before {
    content: "1st line...\A2nd line...\A3rd line...";
}
</style>

Answer 11

php में फ़ंक्शन chr (13) के साथ:

echo '<textarea class="form-control" rows="5" style="width:100%;" name="responsable" placeholder="NOM prénom du responsable légal'.chr(13).'Adresse'.chr(13).'CP VILLE'.chr(13).'Téléphone'.chr(13).'Adresse de messagerie" id="responsable"></textarea>';

Answer 12

मुझे नहीं लगता कि यह अकेले html / css के साथ संभव है। जावास्क्रिप्ट या किसी अन्य प्रकार के हैक का उपयोग करना संभव हो सकता है - पाठ को अगली पंक्ति में धकेलने के लिए अतिरिक्त स्थान, आदि।

Answer 13

बूटस्ट्रैप + कंटेंटेबल + मल्टीलाइन प्लेसहोल्डर

डेमो: https://jsfiddle.net/39mptojs/4/

@cyrbil और @daniel जवाब पर आधारित है

कन्टैंट में प्लेसहोल्डर को सक्षम करने के लिए बूटस्ट्रैप, jQuery और https://github.com/gr2m/bootstrap-expandable-input का उपयोग करना ।

"प्लेसहोल्डर की जगह" जावास्क्रिप्ट का उपयोग करना और सीएसएस में "व्हाइट-स्पेस: प्री" जोड़ना मल्टीलाइन प्लेसहोल्डर है।

एचटीएमएल:

<div class="form-group">
    <label for="exampleContenteditable">Example contenteditable</label>
    <div id="exampleContenteditable" contenteditable="true" placeholder="test\nmultiple line\nhere\n\nTested on Windows in Chrome 41, Firefox 36, IE 11, Safari 5.1.7 ...\nCredits StackOveflow: .placeholder.replace() trick, white-space:pre" class="form-control">
    </div>
</div>

जावास्क्रिप्ट:

$(document).ready(function() {
    $('div[contenteditable="true"]').each(function() {
        var s=$(this).attr('placeholder');
        if (s) {
            var s1=s.replace(/\\n/g, String.fromCharCode(10));
            $(this).attr('placeholder',s1);
        }
    });
});

सीएसएस:

.form-control[contenteditable="true"] {
    border:1px solid rgb(238, 238, 238);
    padding:3px 3px 3px 3px;
    white-space: pre !important;
    height:auto !important;
    min-height:38px;
}
.form-control[contenteditable="true"]:focus {
    border-color:#66afe9;
}

Answer 14

मूल पोस्ट में वॉटरमार्क समाधान महान काम करता है। इसके लिए धन्यवाद्। यदि किसी को इसकी आवश्यकता है, तो इसके लिए एक कोणीय निर्देश है।

(function () {
  'use strict';

  angular.module('app')
    .directive('placeholder', function () {
      return {
        restrict: 'A',
        link:     function (scope, element, attributes) {
          if (element.prop('nodeName') === 'TEXTAREA') {
            var placeholderText = attributes.placeholder.trim();

            if (placeholderText.length) {
              // support for both '\n' symbol and an actual newline in the placeholder element
              var placeholderLines = Array.prototype.concat
                .apply([], placeholderText.split('\n').map(line => line.split('\\n')))
                .map(line => line.trim());

              if (placeholderLines.length > 1) {
                element.watermark(placeholderLines.join('<br>\n'));
              }
            }
          }
        }
      };
    });
}());