رفتن به مطلب
انجمن تیم امنیتی گارد ایران

سوال در رابطه با تگ <textarea> در html


Gorilla
 اشتراک گذاری

ارسال های توصیه شده

سلام. یه سوال داشتم. چطور میشه تگ textarea رو جوری تنظیم کرد که اندازه پیش فرضش 1 سطر باشه، و تا 5 سطر هم بتونه کش بیاد، و بعد از اون اسکرول بخوره؟

مثل بعضی از پیام رسان ها که به طور پیشفرض یک سطر اندازه دارن، و بعد از اون تا چند خط ارتفاعشون می تونه زیاد بشه. ولی بعد از اون اسکرول می خوره.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

سلام..

در اکثر پیام رسان ها به جای استفاده از textarea از div با اتریبیوت contenteditable استفاده میشه.

 

نمونه کد:

 <style>
 #textarea {
     min-height: 20px;
     max-height: 100px;
     overflow-x: hidden;
     overflow-y: auto;
     font-size: 15px;
     white-space: pre-wrap;
     word-wrap: break-word;
     border: 1px solid #000;
 }
 </style>
 
 <div id='textarea' contenteditable='true'></div>

توضیح کد:

یک div با اتریبیوت contenteditable مساوی با true را ایجاد شده.

در قسمت استایل ها مقدار min-height برابر با ارتفاع هر خط می باشد.

مقدار max-height برابر با min-height ضربدر تعداد خطوطی که میخواهیم به اندازه اون بزرگ بشه و بعد اسکرول بخوره.

overflow-x باید برابر با hidden باشه که به صورت افقی اسکرول نخوره.

overflow-y باید auto باشه که وقتی ارتفاع بزرگ تر max-height شد اسکرول بخوره.

و مقدار word-wrap را مساوی break-word قرار دادیم چون باعث میشه که ادامه متن به خط بعد بره.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

در 15 دقیقه قبل، dddddddddddddddddddddddd گفته است :

ممنون فقط اون white space چی کار می کنه؟

و یه چیز دیگه. الان که دیگه از اون تگ استفاده نمی کنم، دیگه ارسال و دریافت پیام انجام نمیشه. مشکل از کجاست؟

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

مشخص میکنه که فاصله ها و اینترها (white space) چجوری مدیریت شوند.

مثلا pre-wrap یعنی فاصله ها را حفظ کن و اگه متن ها بیشتر عرض شد ادامه رو ببر خط بعد.

برای ارسالش روش های مختلفی وجود داره یکیش اینه که یک textarea ایجاد کنید و ویژگی type را مساوی با hidden قرار بدید و بعد در ویژگی oninput اون div کدی بنویسید که هنگام تایپ کردن، مقدار textarea مساوی با متن تایپ شده بشه

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

در 1 دقیقه قبل، KR0N0S گفته است :

مشخص میکنه که فاصله ها و اینترها (white space) چجوری مدیریت شوند.

مثلا pre-wrap یعنی فاصله ها را حفظ کن و اگه متن ها بیشتر عرض شد ادامه رو ببر خط بعد.

برای ارسالش روش های مختلفی وجود داره یکیش اینه که یک textarea ایجاد کنید و ویژگی type را مساوی با hidden قرار بدید و بعد در ویژگی oninput اون div کدی بنویسید که هنگام تایپ کردن، مقدار textarea مساوی با متن تایپ شده بشه

میشه بیشتر توضیح بدین؟

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

<style>
	#textarea {
		min-height: 20px;
		max-height: 100px;
		overflow-x: hidden;
		overflow-y: auto;
		font-size: 15px;
		white-space: pre-wrap;
		word-wrap: break-word;
		border: 1px solid #000;
	}
</style>

<form action="example.php" method="POST">
	<div id='textarea' contenteditable="true" oninput="document.getElementById('msg').value = this.innerText"></div>
	<textarea id='msg' name='msg' style="visibility: hidden;"></textarea>
	<input type='submit' value="Send">
</form>

کد داخل oninput باعث میشه که به محض تایپ کردن در div مقدار textarea مساوی با مقدار اون بشه و هنگام ارسال مقدار داخل textarea ارسال میشه.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری
 اشتراک گذاری

انجمن تیم امنیتی گارد ایران

تیم امنیتی گارد ایران یک گروه مستقل است که قوانین آن با خط مشی جمهوری اسلامی ایران مغایرت ندارد. تیم امنیتی گارد ایران از سال 1393 فعالیت خود را آغاز کرد و هدف این تیم تامین امنیت سایت ها و سرورهای ایرانی است. تیم ما همیشه برای دفاع از مرزهای سایبری سرزمین عزیزمان ایران آماده است.

شبکه های اجتماعی

×
×
  • اضافه کردن...