Verstecke Textarea Größe Handle in Safari

Question

Ich benutze Textarea-Komponenten in meiner Anwendung, und ich kontrolliere ihre Höhe dynamisch. Wie der Benutzer tippt, wird die Höhe erhöht, wenn genügend Text vorhanden ist. Dies funktioniert gut für IE, Firefox und Safari.

In Safari gibt es jedoch ein "Handle" -Tool in der unteren rechten Ecke, das es dem Benutzer ermöglicht, die Größe der Textfläche durch Klicken und Ziehen zu ändern. Ich habe auch dieses Problem mit der Textarea in der Stackoverflow Frage Ask a Question Seite bemerkt. Dieses Tool ist verwirrend und kommt grundsätzlich in die Quere.

Also, gibt es sowieso, um diese Größenänderung zu verbergen?

(Ich bin nicht sicher, ob „Griff“ das richtige Wort ist, aber ich kann an einem besseren Begriff nicht denken.)

Answer 1

Sie können die Größe ändert Verhalten mit CSS außer Kraft setzen:

textarea 
{ 
    resize: none; 
} 

oder

nur einfach

<textarea style="resize: none;">TEXT TEXT TEXT</textarea> 

Gültige Eigenschaften sind: beide, horizontal, vertikal, keine

Answer 2

die saf ari max-height max-width Opportunity funktioniert auch in Firefox 4.0 (b3pre). gutes Beispiel hier übrigens: http://www.alanedwardes.com/posts/safari-and-resizable-textboxes/

Answer 3

die folgende CSS-Regel Verwenden Sie dieses Verhalten für alle TextArea Elemente zu deaktivieren:

textarea { 
    resize: none; 
} 

Wenn Sie es für einige (aber nicht alle) TextArea Elemente, deaktivieren möchten Sie habe ein paar Optionen (Danke an this page).

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

Oder mit einer ID (dh <TextArea id="foo"></TextArea>):

Um ein bestimmtes TextArea mit dem name Attribute auf foo (dh <TextArea name="foo"></TextArea>) zu deaktivieren

#foo { 
    resize: none; 
} 

Beachten Sie, dass diese ist nur relevant für WebKit-basierte Browser (z. B. Safari und Chrome), die das Größenänderungs-Handle zu TextArea Steuerelementen hinzufügen.