Vraag Hoe de resizable-eigenschap van textarea uit te schakelen?


Ik wil de aanpasbare eigenschap van a uitschakelen textarea.

Momenteel kan ik het formaat van een aanpassen textarea door te klikken op de rechter benedenhoek van de textarea en slepen met de muis. Hoe kan ik dit uitschakelen?


2154
2018-03-08 16:15


oorsprong


antwoorden:


De volgende CSS-regel schakelt het formaataanpassing voor uit textarea elementen:

textarea {
  resize: none;
}

Om het uit te schakelen voor sommige (maar niet alle) textareas, er zijn a een paar opties.

Om een ​​specifieke uit te schakelen textarea met de name attribuut ingesteld op foo (d.w.z., <textarea name="foo"></textarea>):

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

Of, met behulp van een id kenmerk (d.w.z. <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

De W3C-pagina vermeldt mogelijke waarden voor het wijzigen van de grootte van beperkingen: geen, beide, horizontaal, verticaal en overnemen:

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

Review een fatsoenlijk compatibiliteitspagina om te zien welke browsers deze functie momenteel ondersteunen. Zoals Jon Hulka heeft opgemerkt, kunnen de dimensies zijn verder ingetogen in CSS met behulp van max-width, max-height, min-width en min-height.

Super belangrijk om te weten:

Deze eigenschap doet niets, tenzij de overloopeigenschap iets anders is dan zichtbaar, wat de standaard is voor de meeste elementen. Dus om dit te gebruiken, moet je zoiets als overflow instellen: scroll;

Citaat van Chris Coyier,    http://css-tricks.com/almanac/properties/r/resize/


2861
2018-03-08 16:17



In CSS ...

textarea {
    resize: none;
}

174
2018-03-08 16:17



Ik heb 2 dingen gevonden

eerste

textarea{resize:none}

dit is een CSS3 welke nog niet is vrijgegeven compatibel met Firefox4 + chroom en safari 

een ander formaatkenmerk is om overflow: auto om van de juiste schuifbalk af te komen, rekening houdend met dir attribuut

code en verschillende browsers

Basic html

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

Sommige browsers

  • IE8

enter image description here

  • FF 17.0.1

enter image description here

  • chroom

enter image description here


91
2017-12-27 20:58



CSS3 heeft een nieuwe eigenschap voor UI-elementen waarmee u dit kunt doen. Het eigendom is het het formaat van de eigenschap wijzigen. U zou dus het volgende aan uw stylesheet toevoegen om de grootte van alle textarea-elementen uit te schakelen:

textarea { resize: none; }

Dit is een CSS3-eigenschap; gebruik een compatibiliteitsgrafiek om browsercompatibiliteit te zien.

Persoonlijk vind ik het erg vervelend om het formaat wijzigen uitgeschakeld te hebben op textarea-elementen. Dit is een van die situaties waarin de ontwerper de client van de gebruiker probeert te 'breken'. Als uw ontwerp niet geschikt is voor een groter tekstgebied, wilt u misschien opnieuw overwegen hoe uw ontwerp werkt. Elke gebruiker kan toevoegen textarea { resize: both !important; } naar hun gebruikersstijlblad om uw voorkeur te overschrijven.


57
2018-03-08 16:35



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

19
2017-11-06 09:19



Als je diepe ondersteuning nodig hebt, kun je de old school-techniek gebruiken

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;
}

18
2018-02-12 12:14



Dit kan eenvoudig in html gedaan worden

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

Dit werkt voor mij. Standaardwaarde is true voor draggable attribuut.


9
2017-07-21 05:18



Je gebruikt gewoon: resize: none; in je CSS.

De verkleinen eigenschap geeft aan of een element al dan niet kan worden aangepast   door de gebruiker.

Notitie: De eigenschap Resize is van toepassing op elementen waarvan de berekende overloop   waarde is iets anders dan "zichtbaar".

Ook verkleinen momenteel niet ondersteund in IE.

Hier zijn verschillende eigenschappen voor het wijzigen van de grootte:

Geen formaat wijzigen:

textarea { 
  resize: none; 
}

Formaat wijzigen in beide richtingen (verticaal en horizontaal):

textarea { 
  resize: both; 
}

Wijzig de grootte van het formaat:

textarea { 
  resize: vertical; 
}

Formaat horizontaal wijzigen:

textarea { 
  resize: horizontal; 
}

Ook als je dat hebt gedaan width en height in uw CSS of HTML, zal het voorkomen dat uw tekstoppervlak vergroot of verkleind wordt, met een bredere ondersteuning voor browsers.


4
2018-06-01 13:11



Gebruik de volgende CSS-eigenschap om de eigenschap Resize uit te schakelen:

resize: none;
  • U kunt dit toepassen als een eigenschap inline-stijl, zoals:

    <textarea style="resize: none;"></textarea>
    
  • of ertussenin <style>...</style> element tags zoals zo:

    textarea {
        resize: none;
    }
    

4
2018-06-12 10:43



CSS3 kan dit probleem oplossen. Helaas wordt het alleen ondersteund op 60% van de gebruikte browsers vandaag de dag.

Voor IE en iOS kun je het formaat aanpassen niet uitschakelen, maar je kunt het beperken textarea dimensie door zijn width en height.

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

Zie Demo


2
2017-10-30 23:26



Het toevoegen van! Maakt het goed:

width:325px !important; height:120px !important; outline:none !important;

outline is gewoon om de blauwe contouren in een bepaalde browser te vermijden


0
2018-02-03 19:07