আপডেট (জানুয়ারী ২০১)): দুর্দান্ত ছোট্ট হ্যাকটি এখন সমস্ত ব্রাউজারগুলিতে আর কাজ করতে পারে না তাই নীচের জাভাস্ক্রিপ্টের সাথে আমার একটি ছোট সমাধান রয়েছে a
একটি সুন্দর লিটল হ্যাক
এটি দুর্দান্ত লাগছে না তবে আপনি এইচটিএমএলে নতুন লাইনগুলি রাখতে পারেন। এটার মত:
<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;CSS এ যাতে পাঠ্য এলাকা আকার সংশোধন করা হয়েছে (jsfiddle দেখুন)।
বিকল্পভাবে
আপনি যখন নতুন লাইন চান, দুবার রিটার্ন হিট করুন (সুতরাং আপনার 'নতুন লাইনের' মাঝে একটি ফাঁকা লাইন রয়েছে created এই 'খালি লাইন' তৈরির জন্য পর্যাপ্ত ট্যাব / স্পেস থাকতে হবে যা আপনার টেক্সারিয়ার প্রস্থের সাথে সমান হবে It আপনার কাছে খুব বেশি কিছু আছে কিনা তা মনে হচ্ছে না, আপনার কেবল যথেষ্ট দরকার This এটি যদিও এতই নোংরা এবং সম্ভবত ব্রাউজারের অনুগত নয় I আমার ইচ্ছা যদি আরও সহজ উপায় হত!
একটি ভাল সমাধান
পরীক্ষা করে দেখুন JSFiddle ।
- এই সমাধানটি টেক্সারিয়ার পিছনে একটি ডিভ অবস্থান করে।
- কিছু জাভাস্ক্রিপ্ট টেক্সারিয়ার পটভূমির রঙ পরিবর্তন করতে, স্থানধারককে যথাযথভাবে আড়াল বা প্রকাশ করতে ব্যবহৃত হয়।
- ইনপুট এবং স্থানধারকদের অবশ্যই একই ফন্টের আকার থাকতে হবে, সুতরাং দুটি মিশ্রণ।
box-sizingএবংdisplay: block পাঠ্য এলাকা উপর বৈশিষ্ট্য গুরুত্বপূর্ণ বা এর পেছনে DIV আছে একই আকারের হবে না।- টেক্সারিয়ায় সেটিং
resize: verticalএবং একটি min-heightসেটও গুরুত্বপূর্ণ - লক্ষ্য করুন যে স্থানধারক পাঠ্যটি কীভাবে মোড়ানো হবে এবং পাঠ্যকে প্রসারিত করা সাদা পটভূমি রাখবে। তবে, মন্তব্যresize সম্পত্তিটি কারণে যখন পাঠ্যকে অনুভূমিকভাবে প্রসারিত করা হবে তখন সমস্যা দেখা দেবে।
- কেবল নিশ্চিত হয়ে নিন যে টেক্সটরিয়ায় ন্যূনতম উচ্চতা আপনার পুরো স্থানধারককে তার সর্বনিম্ন প্রস্থে কভার করার জন্য যথেষ্ট * **
এইচটিএমএল:
<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>
SCSS:
$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();
}
javascript:
$("textarea").on('change keyup paste', function() {
var length = $(this).val().length;
if (length > 0) {
$(this).addClass('data-edits');
} else {
$(this).removeClass('data-edits');
}
});
<?="\n"?>একটি নতুন লাইন হিসাবে রাখতে পারেন