अद्यतन (जनवरी 2016): अच्छी छोटी हैक अब सभी ब्राउज़रों पर काम नहीं कर सकती है इसलिए मेरे पास एक छोटी सी जावास्क्रिप्ट के साथ एक नया समाधान है।
एक अच्छा सा हैक
यह अच्छा नहीं लगता है, लेकिन आप नई लाइनों को html में डाल सकते हैं। ऐशे ही:
<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
1 Long St
London
Postcode
UK"></textarea>
ध्यान दें कि प्रत्येक पंक्ति एक नई रेखा पर है (लिपटे हुए नहीं है) और प्रत्येक 'टैब' इंडेंट 4 रिक्त स्थान है। दी यह एक बहुत अच्छी विधि नहीं है, लेकिन यह काम करने लगता है:
http://jsfiddle.net/01taylop/HDfju/
- यह संभावना है कि आपके पाठ क्षेत्र की चौड़ाई के आधार पर प्रत्येक पंक्ति का इंडेंट स्तर अलग-अलग होगा।
resize: none;सीएसएस में होना जरूरी है ताकि टेक्सटेरिया का आकार तय हो जाए (देखें jsfiddle)।
वैकल्पिक रूप से
जब आप एक नई लाइन चाहते हैं, तो दो बार हिट करें (इसलिए आपकी 'नई लाइनों' के बीच एक खाली लाइन है। इस 'खाली लाइन' को बनाने के लिए पर्याप्त टैब्स / स्पेस की जरूरत होती है जो आपके टेक्सारिया की चौड़ाई के बराबर होगा। लगता है अगर आप बहुत दूर है, तो आपको बस पर्याप्त चाहिए। यह इतना गंदा है और शायद ब्राउज़र अनुरूप नहीं है। मैं चाहता हूं कि एक आसान तरीका था!
एक बेहतर उपाय
JSFiddle बाहर की जाँच करें ।
- यह समाधान textarea के पीछे एक div स्थिति।
- कुछ जावास्क्रिप्ट का उपयोग टेक्स्टारिया की पृष्ठभूमि का रंग बदलने के लिए किया जाता है, जो प्लेसहोल्डर को उचित रूप से छिपाते या प्रकट करते हैं।
- इनपुट्स और प्लेसहोल्डर्स का फॉन्ट साइज़ एक जैसा होना चाहिए, इसलिए दोनों का मिश्रण होता है।
box-sizingऔर display: blockपाठ क्षेत्र पर गुण महत्वपूर्ण हैं या इसके पीछे div एक ही आकार नहीं होगा।- टेक्स्टारिया पर सेटिंग
resize: verticalऔर min-heightऑन भी महत्वपूर्ण हैं - ध्यान दें कि प्लेसहोल्डर टेक्स्ट कैसे लपेटेगा और टेक्सारिया का विस्तार करने से सफेद पृष्ठभूमि बनी रहेगी। हालाँकि, resizeसंपत्ति के बारे में टिप्पणी करना टेस्सर को क्षैतिज रूप से विस्तारित करने पर समस्या पैदा करेगा।
- बस यह सुनिश्चित करें कि टेक्स्टारिया पर न्यूनतम ऊंचाई आपके पूरे प्लेसहोल्डर को उसकी सबसे छोटी चौड़ाई पर कवर करने के लिए पर्याप्त है। **
HTML:
<form>
<input type='text' placeholder='First Name' />
<input type='text' placeholder='Last Name' />
<div class='textarea-placeholder'>
<textarea></textarea>
<div>
First Line
<br /> Second Line
<br /> Third Line
</div>
</div>
</form>
एससीएसएस:
$input-padding: 4px;
@mixin input-font() {
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
font-size: 12px;
font-weight: 300;
line-height: 16px;
}
@mixin placeholder-style() {
color: #999;
@include input-font();
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form {
width: 250px;
}
input,textarea {
display: block;
width: 100%;
padding: $input-padding;
border: 1px solid #ccc;
}
input {
margin-bottom: 10px;
background-color: #fff;
@include input-font();
}
textarea {
min-height: 80px;
resize: vertical;
background-color: transparent;
&.data-edits {
background-color: #fff;
}
}
.textarea-placeholder {
position: relative;
> div {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: $input-padding;
background-color: #fff;
@include placeholder-style();
}
}
::-webkit-input-placeholder {
@include placeholder-style();
}
:-moz-placeholder {
@include placeholder-style();
}
::-moz-placeholder {
@include placeholder-style();
}
:-ms-input-placeholder {
@include placeholder-style();
}
जावास्क्रिप्ट:
$("textarea").on('change keyup paste', function() {
var length = $(this).val().length;
if (length > 0) {
$(this).addClass('data-edits');
} else {
$(this).removeClass('data-edits');
}
});
<?="\n"?>एक नई लाइन के रूप में डाल सकते हैं