Wie füge ich einen Standardwert für HTML <Textbereich> hinzu? [geschlossen]

349

Ich möchte einen Standardwert für mein HTML festlegen <textarea>. Ich habe aus einem Material gelesen, dass man so etwas tun muss, um einen Standardwert hinzuzufügen <textarea>This is default text</textarea>. Ich habe das gemacht, aber es funktioniert nicht. Was ist das Richtige?

html textarea

— Newbie Coder
quelle

1

Sie zeigen, wie es funktionieren soll. Zeigen Sie Ihren HTML-Code, wenn dies nicht der Fall ist

— Pekka

Zeigen Sie bitte Ihr HTML ...

— Daniel Ramirez-Escudero

1

Die Antwortsuite für die Frage ohne den darin angegebenen Codeversuch. Behandeln wir die Frage ohne diesen Versuch, damit die Frage nicht aus engen Gründen "kein Code" oder "länger reproduzierbar" gestellt wird.

— Tsyvarev

620

Hier ist mein jsFiddle- Beispiel. das funktioniert gut:

<textarea name='awesome'>Default value</textarea>

— Andrew Jackman
quelle

93

Sie können verwenden Platzhalter Attribut , das keinen fügt Standardwert aber könnte das sein , was Sie suchen , aus:

<textarea placeholder="this text will show in the textarea"></textarea>

Überprüfen Sie es hier - http://jsfiddle.net/8DzCE/949/

Wichtiger Hinweis (Wie von Jon Brave in den Kommentaren vorgeschlagen) :

Das Platzhalterattribut legt nicht den Wert eines Textbereichs fest. Eher "Das Platzhalterattribut stellt einen kurzen Hinweis (ein Wort oder eine kurze Phrase) dar, der dem Benutzer bei der Dateneingabe helfen soll, wenn das Steuerelement keinen Wert hat" [und verschwindet, sobald der Benutzer in den Textbereich klickt]. Es wird niemals als "Standardwert" für das Steuerelement verwendet. Wenn Sie das möchten, müssen Sie den gewünschten Text in das Feld Hier ist der tatsächliche Standardwert einfügen, wie in anderen Antworten hier angegeben

— bhavya_w
quelle

14

Sie sollten klarstellen, dass placeholderder Wert von a nicht festgelegt wirdtextarea . Eher "Das Platzhalterattribut stellt einen kurzen Hinweis (ein Wort oder eine kurze Phrase) dar, der dem Benutzer bei der Dateneingabe helfen soll, wenn das Steuerelement keinen Wert hat" [und verschwindet, sobald der Benutzer in den Textbereich klickt]. Es wird niemals als "Standardwert" für das Steuerelement verwendet. Wenn Sie das möchten, müssen Sie den gewünschten Text in das Feld einfügen <textarea>Here is the actual default value</textarea>, wie in anderen Antworten hier angegeben.

— JonBrave

10

Dies ist eigentlich eine sehr gefährliche Lösung. Bitte verwechseln Sie niemals Platzhalter mit Standardwerten.

— Qwerty

@Qwerty - Ja, wir sollten Platzhalter nicht mit Standardwerten verwechseln. Aber gefährlich ... Können Sie ein Beispiel / einen Fall nennen, in dem und wie es gefährlich sein kann (in der Lage oder wahrscheinlich, Schaden oder Verletzungen zu verursachen)?

— Bhavya_w

1

Platzhalter senden kein Formular ein. Das ist gefährlich, wenn Sie oder Ihr Benutzer erwarten, dass es gesendet wird.

— Qwerty

2

Wenn der Wert nicht übermittelt wird, handelt es sich nicht um einen Standardwert, sondern um einen Hinweis. Wenn ich nach einem Standardwert suche, erwarte ich, dass er sich als Standardwert verhält, und was gefährlich ist, ist die Tatsache, dass dieser kein erwartetes Verhalten aufweist. Es ist gefährlich anzunehmen, dass diese Lösung das löst, wonach gefragt wurde. Aber es ist richtig für Sie anzunehmen, dass ich zwar nach A suche , aber nach B frage . Und wenn Sie dies implizit in Ihrer Antwort angeben, ist Ihre Antwort legitim. Sie haben Recht, dass es um mangelndes Wissen geht, aber Menschen, die nach dieser Antwort suchen, fehlt dieses Wissen.

— Qwerty

20

Wenn Sie Informationen aus einer Datenbank zur Bearbeitung in ein Textbereich-Tag einfügen möchten: Das Eingabe-Tag, um keine Daten anzuzeigen, die mehrere Zeilen belegen: Zeilen ohne Arbeit, Tag-Eingabe ist eine Zeile.

<!--input class="article-input" id="article-input" type="text" rows="5" value="{{article}}" /-->

Das Textarea-Tag hat keinen Wert , funktioniert aber gut mit dem Lenker

<textarea class="article-input" id="article-input" type="text" rows="9" >{{article}}</textarea>

— user2519992
quelle

9

Nur für den Fall, dass Sie Angular.js in Ihrem Projekt verwenden (wie ich) und einen ng-modelSatz für Sie haben, legen Sie <textarea>den Standard wie folgt fest :

<textarea ng-model='foo'>Some default value</textarea>

...wird nicht funktionieren!

Sie müssen den Standardwert auf die Textbereiche ng-modelim jeweiligen Controller festlegen oder verwenden ng-init.

Beispiel 1 (unter Verwendung ng-init):

Code-Snippet anzeigen

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', [ '$scope', function($scope){
  // your controller implementation here
}]);

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body ng-app='myApp'>
    <div ng-controller="MyCtrl">
      <textarea ng-init='foo="Some default value"' ng-model='foo'></textarea>
    </div>
  </body>
</html>

Erweitern Sie das Snippet

Beispiel 2 (ohne Verwendung ng-init):

Code-Snippet anzeigen

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', [ '$scope', function($scope){
  $scope.foo = 'Some default value';
}]);

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body ng-app='myApp'>
    <div ng-controller="MyCtrl">
      <textarea ng-model='foo'></textarea>
    </div>
  </body>
</html>

Erweitern Sie das Snippet

— Rahul Desai
quelle

1

Ay fand diesen stackoverflow.com/a/25391822/2199525 - machte die Dinge noch klarer.

— Leymannx

7

Einige Anmerkungen und Erläuterungen:

placeholder='' Fügt Ihren Text ein, ist jedoch ausgegraut (in einem Tooltip-Format). Sobald Sie auf das Feld klicken, wird Ihr Text durch ein leeres Textfeld ersetzt.
value=''ist kein <textarea>Attribut und funktioniert nur für <input>Tags, dh <input type='text'>usw. Ich weiß nicht, warum die Entwickler von HTML5 beschlossen haben, dies nicht zu integrieren, aber so ist es vorerst.
Die beste Methode zum Einfügen von Text in <textarea>Elemente wurde hier korrekt beschrieben: <textarea> Desired text to be inserted into the field upon page load </textarea>Wenn der Benutzer auf das Feld klickt, kann er den Text bearbeiten und er bleibt im Feld (im Gegensatz zu placeholder='').
Hinweis: Wenn Sie Text zwischen den Tags <textarea>und einfügen </textarea>, können Sie diesen nicht verwenden, placeholder=''da er durch den eingefügten Text überschrieben wird.

— twknab
quelle

6

Wenn ich so etwas mache, hat es für mich funktioniert:

<textarea name="test" rows="4" cols="6">My Text</textarea>

— Arun Raj
quelle

4

Auch das hat bei mir sehr gut funktioniert:

<textarea class="form-control" rows="3" name="msg" placeholder="Your message here." onfocus='this.select()'>
<?php if (isset($_POST['encode'])) { echo htmlspecialchars($_POST['msg']);} ?>
</textarea>

In diesem Fall kam $ _POST ['encode'] daraus:

<input class="input_bottom btn btn-default" type="submit" name="encode" value="Encode">

Der PHP-Code wurde zwischen die Tags und eingefügt.

— Winthropit
quelle

3

Der Platzhalter kann den Standardwert für den Textbereich nicht festlegen. Sie können verwenden

<textarea rows="10" cols="55" name="description"> /*Enter default value here to display content</textarea>

Dies ist das Tag, wenn Sie es für die Datenbankverbindung verwenden. Sie können eine andere Syntax verwenden, wenn Sie andere Sprachen als php verwenden. Für php:

z.B:

<textarea rows="10" cols="55" name="description" required><?php echo $description; ?></textarea>

Erforderlicher Befehl minimiert den Aufwand für die Überprüfung leerer Felder mit PHP.

— AA
quelle

1

Sie können this.innerHTML verwenden.

<textarea name="message" rows = "10" cols = "100" onfocus="this.innerHTML=''"> Enter your message here... </textarea>

Erweitern Sie das Snippet

Wenn der Textbereich fokussiert ist, wird das innerHTML des Textbereichs im Grunde genommen zu einer leeren Zeichenfolge.

— strahd
quelle

-1

Bitte beachten Sie, dass Sie Änderungen am Textbereich vorgenommen haben, nachdem dieser gerendert wurde. Sie erhalten den aktualisierten Wert anstelle des initialisierten Werts.

<!doctype html>
<html lang="en">
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
            $(function () {
                $('#btnShow').click(function () {
                    alert('text:' + $('#addressFieldName').text() + '\n value:' + $('#addressFieldName').val());
                });
            });
            function updateAddress() {
                $('#addressFieldName').val('District: Peshawar \n');
            }
        </script>
    </head>
    <body>
        <?php
        $address = "School: GCMHSS NO.1\nTehsil: ,\nDistrict: Haripur";
        ?>
        <textarea id="addressFieldName" rows="4" cols="40" tabindex="5" ><?php echo $address; ?></textarea>
        <?php echo '<script type="text/javascript">updateAddress();</script>'; ?>
        <input type="button" id="btnShow" value='show' />
    </body>
</html>

Wie Sie sehen können, unterscheidet sich der Wert des Textbereichs von dem Text zwischen dem öffnenden und dem schließenden Tag des betreffenden Textbereichs.

— Adeel Raza Azeemi
quelle

-5

Sie können auch das Attribut "Wert" hinzufügen und das so einstellen:


<textarea value="your value"> </textarea>

— Monsterstück
quelle

1

Aus der MDN-Dokumentation : " <textarea>Unterstützt das valueAttribut nicht".

— Robby Cornelissen

Beim Schreiben in React lohnt es sich, sich an der HTML-Spezifikation auszurichten.

— Tomasz Waszczyk