discord icon
سرور دیسکورد گاردایران
Gorilla

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

پست های پیشنهاد شده

سلام. یه سوال داشتم. چطور میشه تگ 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 ارسال میشه.

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


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

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

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

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

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

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

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

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

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