Wie ändere ich die Form eines Textbereichs mit JavaScript?-js-Tutorial-php.cn

Wie ändere ich die Form eines Textbereichs mit JavaScript?

WBOY

Freigeben： 2023-08-30 16:37:02

nach vorne

1465 Leute haben es durchsucht

如何使用 JavaScript 更改文本区域的形状？

Textarea ist ein Feld mit dynamischer Breite und Höhe. Das heißt, wenn darin Text eingegeben wird, läuft der Text nicht über und bleibt nur in diesem Textbereich enthalten, da er seine Höhe und Breite dynamisch vergrößern oder verkleinern kann. Textarea wird hauptsächlich in Formularen verwendet, um die vollständige Adresse des Benutzers und andere Inhalte mit großem Textinhalt zu erhalten.

Typischerweise hat der Textbereich die Form eines Quadrats oder Rechtecks und kann mit JavaScript und CSS geändert werden. In diesem Artikel erfahren Sie, wie Sie die Form eines Textbereichs mithilfe von JavaScript ändern.

Um die Form eines Textbereichs mithilfe von JavaScript zu ändern, können wir verschiedene CSS-Eigenschaften mit unterschiedlichen Werten verwenden, um den Textbereich in unterschiedlichen Strukturen zu gestalten.

Textbereich in Parallelogramm ändern

Um die Form des Textbereichs in ein Parallelogramm zu ändern, können wir die style.transform-Eigenschaft von CSS in JavaScript verwenden und den von skew() angegebenen Wert verwenden.

Grammatik

Die folgende Syntax hilft Ihnen zu verstehen, wie Sie mit der oben genannten Methode die Form eines Textbereichs ändern können -

selected_textarea.style.transform = "skew(40deg)";

Nach dem Login kopieren

Lassen Sie uns das im Detail kennenlernen, indem wir es tatsächlich in einem Codebeispiel implementieren und sehen, wie es die Form des Textbereichs verändert.

Algorithmus

Schritt 1 - Im ersten Schritt fügen wir dem HTML-Dokument einen Textbereich hinzu und ändern später seine Form mithilfe von JavaScript.
Schritt 2 – In diesem Schritt fügen wir ein Schaltflächenelement mit einem damit verbundenen Onclick-Ereignis hinzu und rufen später beim Klicken auf die Schaltfläche eine Funktion auf und ändern die Form des Textbereichs.
Schritt 3 – Im nächsten Schritt definieren wir eine JavaScript-Funktion, in der wir das Textarea-Element greifen und seine Form mithilfe der oben beschriebenen Syntax in ein Parallelogramm ändern. < /p>
Schritt 4 – Im letzten Schritt weisen wir dem Onclick-Ereignis der Schaltfläche eine JavaScript-Funktion als Wert zu, sodass die Funktion später aufgerufen wird, wenn auf die Schaltfläche geklickt wird.

Beispiel

Das folgende Beispiel erklärt Ihnen, wie Sie die CSS-Eigenschaft transform verwenden, um die Form eines Textbereichs in ein Parallelogramm zu ändern -

<html>
<body>
   <h2>Change the shape of a textarea</h2>
   <p id = "upper">The shape of below textarea will be changed once you click the button.</p>
   <textarea id = "textar">Enter something in the textarea.....</textarea> <br> <br>
   <button id = "btn" onclick = "changeShape()">Click to change the shape</button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var upper = document.getElementById("upper");
      function changeShape() {
         var textar = document.getElementById('textar');
         textar.style.transform = "skew(50deg)";
         upper.innerHTML = " The shape of the below textarea is changed as you clicked the button. ";
         result.innerHTML += " The shape of the textarea is changed to parallelogram using style.transform = 'skew(50deg)'";
      }
   </script>
</body>
</html>

Nach dem Login kopieren

Im obigen Beispiel haben wir die Transform-Eigenschaft mit dem skew()-Wert verwendet, um die Form des Textbereichs in ein Parallelogramm zu ändern.

Ändern Sie die Form des Textbereichs in oval

Um die Form des Textbereichs in ein Oval zu ändern, können wir die borderRadius-Eigenschaft von CSS in JavaScript mit einem Wert von 50 % verwenden.

Grammatik

Sie können der folgenden Syntax folgen, um die Form des Textbereichs mithilfe der Eigenschaft borderRadius in eine Ellipse zu ändern

selected_textarea.style.borderRadius = "50%";

Nach dem Login kopieren

Sehen wir uns die tatsächliche Implementierung dieser Methode an, um zu verstehen, wie sie funktioniert.

Algorithmus

Der Algorithmus dieses Beispiels ähnelt fast dem Algorithmus des vorherigen Beispiels. Sie müssen nur ein paar kleine Änderungen vornehmen, die Eigenschaft „transform“ im obigen Beispiel durch die Eigenschaft „borderRadius“ ersetzen und ihren Wert auf „50 %“ setzen, um die elliptische Form des Textbereichs zu erhalten.

Beispiel Das folgende Beispiel zeigt, wie man mit borderRadius die Form eines Textbereichs in ein Oval ändert -

<html>
<body>
   <h2>Change the shape of a textarea to an ellipse</h2>
   <p id = "upper">The shape of below textarea will be changed once you click the button.</p>
   <textarea id = "textar">Enter something in the textarea.....</textarea> <br> <br>
   <button id = "btn" onclick = "changeShape()">Click to change the shape</button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var upper = document.getElementById("upper");
      function changeShape() {
         var textar = document.getElementById('textar');
         textar.style.borderRadius = "50%";
         upper.innerHTML = " The shape of the below textarea is changed as you clicked the button. ";
         result.innerHTML += " The shape of the textarea is changed to ellipse using style.borderRadius = '50%'";
      }
   </script>
</body>
</html>

Nach dem Login kopieren

Im obigen Beispiel verwenden wir JavaScript, um mithilfe der Eigenschaft borderRadius die Form des Textbereichs von einem Rechteck in eine Ellipse zu ändern.

In diesem Artikel haben wir zwei verschiedene Methoden zum Ändern der Form eines Textbereichs in zwei verschiedene Formen anhand von Codebeispielen für jede Methode ausführlich besprochen. Es ist auch möglich, die Form eines Textbereichs mithilfe anderer CSS-Eigenschaften in JavaScript in eine andere zu ändern. Suchen Sie also weiter und lernen Sie weiter.

Das obige ist der detaillierte Inhalt vonWie ändere ich die Form eines Textbereichs mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!