Ik wil de resizame eigenschap van een textareauitschakelen.
Momenteel kan ik het formaat van een textareawijzigen door op de rechterbenedenhoek van de textareate klikken en de muis te slepen. Hoe kan ik dit uitschakelen?
Antwoord 1, Autoriteit 100%
De volgende CSS-regel schakelt de grootte van het gedrag uit voor textareaElementen:
textarea {
resize: none;
}
om het uit te schakelen voor sommigen (maar niet alle) textareaS, er zijn een Paar opties .
U kunt classAttribuut in uw tag gebruiken (<textarea class="textarea1">):
.textarea1 {
resize: none;
}
Een specifieke textareauitschakelen met de nameAttribuut ingesteld op foo(IE, <textarea name="foo"></textarea>):
textarea[name=foo] {
resize: none;
}
of, met behulp van een idkenmerk (d.w.z. <textarea id="foo"></textarea>):
#foo {
resize: none;
}
De W3C-paginavermeldt mogelijke waarden voor het wijzigen van de grootte: geen, beide , horizontaal, verticaal en overerven:
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
}
Bekijk een degelijke compatibiliteitspaginaom te zien welke browsers deze functie momenteel ondersteunen. Zoals Jon Hulka heeft opgemerkt, kunnen de afmetingen verder beperktzijn in CSS met max-width, max-height, min-breedte en min-hoogte.
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 over het algemeen moet je om dit te gebruiken iets instellen als overflow: scroll;
Citaat door Sara Cope,
http://css-tricks.com/almanac/properties/r/resize/
Antwoord 2, autoriteit 6%
In CSS …
textarea {
resize: none;
}
Antwoord 3, autoriteit 3%
Ik heb twee dingen gevonden:
Eerste
textarea{resize: none}
Dit is een CSS 3, die nog niet is vrijgegeven, compatibel met Firefox 4 (en hoger), Chrome en Safari.
Een andere indelingsfunctie is om overflow: autoom de juiste schuifbalk te verwijderen, rekening houdend met de dirattribuut.
Code en verschillende browsers
Basis HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>
Sommige browsers
- Internet Explorer 8
- Firefox 17.0.1
- Chroom
Antwoord 4, autoriteit 2%
CSS 3 heeft een nieuwe eigenschap voor UI-elementen waarmee u dit kunt doen. De eigenschap is de resize eigenschap. U zou dus het volgende aan uw stylesheet toevoegen om het formaat van alle tekstgebiedelementen uit te schakelen:
textarea { resize: none; }
Dit is een CSS 3-eigenschap; gebruik een compatibiliteitstabelom de browsercompatibiliteit te bekijken.
Persoonlijk zou ik het erg vervelend vinden als het formaat van tekstgedeelten is uitgeschakeld. Dit is een van die situaties waarin de ontwerper de klant van de gebruiker probeert te “breken”. Als uw ontwerp geen groter tekstgebied kan bevatten, wilt u misschien opnieuw nadenken over hoe uw ontwerp werkt. Elke gebruiker kan textarea { resize: both !important; }toe aan hun gebruikersstylesheet om uw voorkeur te negeren.
Antwoord 5
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
Antwoord 6
Als je diepe ondersteuning nodig hebt, kun je een ouderwetse 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;
}
Antwoord 7
Dit kan eenvoudig in HTML worden gedaan:
<textarea name="textinput" draggable="false"></textarea>
Dit werkt voor mij. De standaardwaarde is truevoor het kenmerk draggable.
Antwoord 8
Je gebruikt gewoon: resize: none;in je CSS.
De eigenschap resizegeeft aan of het formaat van een element al dan niet kan worden gewijzigd
door de gebruiker.Opmerking:de eigenschap resize is van toepassing op elementen waarvan de berekende overloop
waarde is iets anders dan “zichtbaar”.
Ook formaat wijzigenwordt momenteel niet ondersteund in Internet Explorer.
Hier zijn verschillende eigenschappen voor formaat wijzigen:
Geen formaat wijzigen:
textarea {
resize: none;
}
Formaat in beide richtingen wijzigen (verticaal en horizontaal):
textarea {
resize: both;
}
Formaat verticaal wijzigen:
textarea {
resize: vertical;
}
Horizontaal formaat wijzigen:
textarea {
resize: horizontal;
}
Ook als je widthen heightin je CSS of HTML hebt, zal het voorkomen dat je tekstgebied wordt vergroot of verkleind, met een bredere browserondersteuning.
Antwoord 9
Gebruik de volgende CSS-eigenschap om de eigenschap resize uit te schakelen:
resize: none;
-
U kunt dit als een inline-stijleigenschap als volgt toepassen:
<textarea style="resize: none;"></textarea> -
of tussen
<style>...</style>elementtags zoals:textarea { resize: none; }
Antwoord 10
U kunt eenvoudig de eigenschap textareaals volgt uitschakelen:
textarea {
resize: none;
}
Om verticaalof horizontaalformaataanpassing uit te schakelen, gebruikt u
resize: vertical;
of
resize: horizontal;
Antwoord 11
CSS 3 kan dit probleem oplossen. Helaas wordt het tegenwoordig alleen ondersteund in 60% van de gebruikte browsers.
Voor Internet Explorer en iOS kunt u het formaat wijzigen niet uitschakelen, maar u kunt de dimensie textareabeperken door de widthen height.
/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */
Antwoord 12
Ik heb een kleine demo gemaakt om te laten zien hoe het formaat van eigenschappen werkt. Ik hoop dat het jou en anderen ook zal helpen.
.resizeable {
resize: both;
}
.noResizeable {
resize: none;
}
.resizeable_V {
resize: vertical;
}
.resizeable_H {
resize: horizontal;
}<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>
<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>
<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>
<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>Antwoord 13
Met @stylekun je het een aangepast formaat geven en de functie voor formaat wijzigen uitschakelen (resize: none;).
@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
Antwoord 14
Formaat wijzigen voor alle textareas uitschakelen:
textarea {
resize: none;
}
Om de grootte uit te schakelen voor een specifieke textarea, voegt u een attribuut toe, name, of een idEN ZET HET AAN IETS. In dit geval is het genoemd noresize
HTML
<textarea name='noresize' id='noresize'> </textarea>
CSS
/* Using the attribute name */
textarea[name=noresize] {
resize: none;
}
/* Or using the id */
#noresize {
resize: none;
}
Antwoord 15
U kunt ook proberen met jQuery
$('textarea').css("resize", "none");
Antwoord 16
Het toevoegen van !importantMaakt het Werk:
width:325px !important; height:120px !important; outline:none !important;
outlineis gewoon om de blauwe omtrek op bepaalde browsers te vermijden.
Antwoord 17
textarea {
resize: none;
}
De hierboven hierboven zal de resizame eigenschap van alle <textarea/>–elementen in uw project uitschakelen. Als u dat wilt, is dat prima, anders wilt u een specifieke klasse gebruiken voor uw Textarea-elementen.
.not-resizable {
resize: none;
}
In uw HTML
<textarea class="not-resizable"></textarea>