TextArea يتمدد مع النص

السلام عليكم ..

كود بسيط مع مكتبة الجافا jQuery

وظيفة الكود :
تمدد طول TextArea مع طول النص بدل من تفعيل الScroll Bar (شريط التمرير)

المكتبة :
jQuery

عدد الملفات :
2

Screen Shot:

طريقة العمل :
استعد ملفات الجافا سكربت في هيدر الصفحة :

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.autogrow.js”></script>

واضف هذا الكود في الهيدر ايضا

<script type=”text/javascript”>
$(document).ready (function() {

$(‘textarea.owner’).autogrow();
      
});
</script>

textarea.owner هو اسم الستايل الخاص بالـtext Area

وبعد ذلك اضف ملف ستايل خاص بالtextArea

textarea.owner {
width: 400px;
line-height: 16px;
min-height: 84px;
height: 84px;
font-family: tahoma;
font-size: 11px;
direction:rtl;
}

مهم جدا تحديد الـ

  • line-height
  • min-height

يمكنك اضافة الستايل اما في هيدر الصفحة او عن طريق ملف منفصل واستدعائه في هيدر الموقع .

واخير اضف في محتوى الصفحة وفي اي مكان تريد :

<textarea class=”owner” name=”myTextarea”></textarea>

لتحميل الملفات :
رابط # 01 :
http://www.zshare.net/download/72771467130538/
رابط # 02 :
http://www.mediafire.com/?3ndilzazbzx
رابط # 03 :
http://www.sendspace.com/file/3yoayl

بالتوفيق ان شاء الله

One thought on “TextArea يتمدد مع النص

  1. تسلم ايدك يا غالى ومن الواضح ان وظيفته جميله
    لكن استسمحك على مثال فى صفحة كده اذا ينفع
    شكرا لك

أضف تعليق

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

يمكنك استخدام أكواد HTML والخصائص التالية: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>