در این مطلب میخوام یک پلاگین jQuery بنام textarea-autosize رو خدمت شما معرفی کنم و اونو آموزش بدم.
با استفاده از این پلاگین میتونین به راحتی هر چه تمامتر کاری کنید که زمانی که کاربر در textarea میخواد enter بزنه که بره به خط بعد ، ارتفاع هم به همون میزان اضافه بشه و هرچقد که کاربر Enter بزنه ، ارتفاع textarea به همون میزان زیاد میشه.
میبینید که هنگامی که در درون textarea ، چند Enter بزنین ، ارتفاع به همون میزان زیاد میشه و scroll نمیخوره. در صورتی که اگر از این پلاگین استفاده نکنین ، با Enter زدن اسکرول میخوره.
نحوه استفاده :
ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jQuery و jquery.textarea_autosize.min.js نیاز داریم. من این فایلهارو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید.
حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>7Learn.com – jQuery Textarea Autosize</title>
<style type=”text/css”>
#textarea {
border: 1px solid #d9d9d9;
border-radius: 3px;
width: 500px;
margin: auto;
display: block;
font-size: 16px;
padding: 6px 8px 6px 8px;
}
</style>
</head>
<body>
<textarea id=“textarea” class=“js-auto-size” rows=“1”></textarea>
<script type=“text/javascript” src=“jquery.min.js”></script>
<script type=“text/javascript” src=“jquery.textarea_autosize.min.js”></script>
<script type=“text/javascript”>
</script>
</body>
</html>
|
میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم. در پایان هم یک تگ script قرار دادیم ، که کدهای خودمون رو درونش بنویسیم.
اگر تا همینجا در مرورگر مشاهده کنید ، زمانی که در textarea ، شروع به زدن Enter میکنیم ، از همون ابتدا اسکرول ایجاد میشه و اتفاق جالبی نیس. برای اینکه این مشکلو برطرف کنیم ، یا میتونیم ارتفاع textarea رو خودمون زیاد کنیم ، که کار خیلی جالبی نیس و یا اینکه از این پلاگین استفاده کنیم که ارتفاع اتوماتیک زیاد بشه.
برای اینکار ابتدا باید یک textarea قرار بدیم و کلاس رو بهش نسبت بدیم. برای هر textarea که میخواین از این ویژگی بهره ببره ، همین class رو قرار بدین. بعدش با استفاده از خاصیت rows مشخص کردیم که در ابتدا یک ردیف وجود داشته باشه. بصورت زیر :
|
1
|
<textarea id=“textarea” class=“js-auto-size” rows=“1”></textarea>
|
حالا کدهای CSS زیر رو به تمامی textarea ها نسبت میدهیم :
|
1
2
3
4
5
6
7
8
|
textarea {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
max-height: 94px; /* optional, but recommended */
min-height: 31px;
overflow-x: hidden; /* for Firefox (issue #5) */
}
|
در قسمت باید کمترین ارتفاع textarea رو مشخص کنید که باید اون رو با توجه به سایز فونت و padding ها و … محاسبه کنید. در قسمت هم باید بیشترین ارتفاعی که textarea تا اون لحظه اسکرول نمیشه رو مشخص کنید. در بالا 94 قرار دادیم. یعنی اگه ارتفاع textarea بیشتر از 94px شد ، اسکرول تازه شروع میشه.
برای اینکه کارایی که کردیم تاثیر داشته باشه و پلاگین رو هم درگیر کنیم ، باید کد زیر رو در تگ script پایانی وارد کنیم:
|
1
|
$(‘textarea.js-auto-size’).textareaAutoSize();
|
با اینکار تمام textarea هایی که کلاس دارند ، توسط این کد انتخاب میشن و این پلاگین به اونا نسبت داده میشه و ارتفاعشون تا 94px اتوماتیک میشه. این ارتفاع قابل تغییر هست و میتونین با توجه به نیاز کمتر و یا بیشترش کنین.
امیدوارم خوشتون اومده باشه.
