html - w3school - textarea value




كيفية تعطيل خاصية تغيير حجم textarea؟ (11)

أنت ببساطة تستخدم: resize: none; في CSS الخاص بك.

تحدد الخاصية resize ما إذا كان يمكن تغيير حجم عنصر من قبل المستخدم أم لا.

ملاحظة: تنطبق خاصية تغيير الحجم على العناصر التي تكون قيمة الفائض المحسوبة فيها هي شيء آخر غير "مرئي".

أيضا تغيير الحجم غير معتمد في IE في الوقت الراهن.

فيما يلي خصائص مختلفة لتغيير الحجم:

بلا تغيير حجم:

textarea { 
  resize: none; 
}

تغيير حجم كلتا الطريقتين (عموديًا وأفقيًا):

textarea { 
  resize: both; 
}

تغيير الحجم رأسيًا:

textarea { 
  resize: vertical; 
}

تغيير الحجم أفقيًا:

textarea { 
  resize: horizontal; 
}

أيضًا إذا كان لديك width height في CSS أو HTML ، فسيؤدي ذلك إلى منع تغيير حجم النص الخاص بك ، مع دعم مستعرضات أوسع.

أرغب في تعطيل خاصية تغيير حجم textarea .

حاليًا ، يمكنني تغيير حجم textarea بالنقر فوق الزاوية السفلية اليمنى من جزء textarea وسحب الماوس. كيف يمكنني تعطيل هذا؟


إذا كنت بحاجة إلى دعم عميق ، يمكنك استخدام تقنية المدرسة القديمة

textarea {
    max-width:/*desired fixed width*/ px;
    min-width:/*desired fixed width*/ px;
    min-height:/*desired fixed height*/ px;
    max-height:/*desired fixed height*/ px;
}

باستخدام @style ، يمكنك @style حجم مخصص وتعطيل ميزة (resize: none;) .

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })

تعطل قاعدة CSS التالية سلوك تغيير الحجم لعناصر textarea :

textarea {
  resize: none;
}

لتعطيله لبعض (ولكن ليس كل) textarea s ، هناك عدة خيارات .

لتعطيل نص معين مع تعيين سمة name إلى foo (على <textarea name="foo"></textarea> ، <textarea name="foo"></textarea> ):

textarea[name=foo] {
  resize: none;
}

أو ، باستخدام سمة id (مثل <textarea id="foo"></textarea> ):

#foo {
  resize: none;
}

تسرد صفحة W3C القيم المحتملة لقيود الحجم: لا شيء ، كلاهما ، أفقي ، رأسي ، وراثة:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

راجع صفحة التوافق الملائمة لمعرفة المتصفحات التي تدعم هذه الميزة حاليًا. وكما علّق Jon Hulka ، يمكن زيادة تقييد الأبعاد في CSS باستخدام الحد الأقصى للعرض و max-height و min-width و min-height.

من المهم جدًا معرفة ما يلي:

لا تقوم هذه الخاصية بأي شيء ما لم تكن الخاصية overflow شيء آخر غير مرئي ، وهو الإعداد الافتراضي لمعظم العناصر. لذلك بشكل عام لاستخدام هذا ، سيكون لديك لضبط شيء مثل فيض: التمرير.

اقتباس بواسطة Chris Coyier ، http://css-tricks.com/almanac/properties/r/resize/


في CSS ...

textarea {
    resize: none;
}

لتعطيل تغيير الحجم لجميع textarea

textarea {
    resize: none;
}

لتعطيل تغيير الحجم textarea معين ، أضف name سمة أو textarea على شيء ما. في هذه الحالة ، يدعى noresize

<textarea name='noresize' id='noresize'> </textarea>

CSS

/*  using the attribute name */
textarea[name=noresize]{
resize: none;
}
/* or using the id */

#noresize{
resize: none;
}

لقد وجدت 2 الأشياء

أول

textarea{resize:none}

هذا هو css3 الذي لم يتم إصداره بعد متوافق مع Firefox4 + chrome و safari

ميزة تنسيق آخر هي overflow:auto للتخلص من شريط التمرير الصحيح مع مراعاة سمة dir

كود ومتصفحات مختلفة

أتش تي أم أل الأساسي

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

بعض المتصفحات

  • IE8

  • FF 17.0.1

  • كروم


هذا يمكن أن يكون في أتش تي أم أل سهلة

<textarea name="textinput" draggable="false"></textarea>

هذا يعمل بالنسبة لي. القيمة الافتراضية هي true لسمة draggable .


يستطيع CSS3 حل هذه المشكلة. للأسف ، لا يتم دعمها إلا على 60٪ من المتصفحات المستخدمة في الوقت الحالي.

بالنسبة إلى IE و iOS ، لا يمكنك إيقاف تغيير الحجم ولكن يمكنك الحد من بُعد textarea عن طريق ضبط width height .

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

انظر تجريبي


يمكنك ببساطة تعطيل خاصية textarea مثل هذا:

textarea{
    resize: none;
}

لتعطيل تغيير الحجم العمودي أو الأفقي ، استخدم

resize: vertical;

أو

resize: horizontal;

<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>




css