it-swarm.com.de

Wie füge ich einen Standardwert für html <textarea> hinzu?

Ich möchte einen Standardwert für mein HTML <textarea> festlegen. Ich habe aus einem Material gelesen, dass zum Hinzufügen von Standardwerten etwas wie <textarea>This is default text</textarea> erforderlich ist. Ich habe das gemacht, aber es geht nicht. Was ist das Richtige zu tun?

302
Newbie Coder

Hier ist mein jsFiddle Beispiel. das funktioniert gut:

<textarea name='awesome'>Default value</textarea>
536
Andrew Jackman

Sie können PlatzhalterAttribut verwenden, das keinen Standardwert hinzufügt, aber möglicherweise das ist, wonach Sie suchen:

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

Schau es dir hier an - http://jsfiddle.net/8DzCE/949/ enter image description here

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

Platzhalterattribut legt den Wert einer Textfläche nicht 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 es verschwindet, sobald der Benutzer in den Textbereich klickt]. Es wird nie als "Standardwert" für das Steuerelement fungieren. Wenn Sie das möchten, müssen Sie den gewünschten Text in das Feld eingeben. Hier ist der tatsächliche Standardwert, wie in den anderen Antworten hier.

83
bhavya_w

Wenn Sie Informationen aus einer Datenbank in ein Textarea-Tag zur Bearbeitung einfügen möchten: Das Eingabe-Tag, das keine Daten anzeigt, die mehrere Zeilen enthalten: Zeilen Keine Arbeit, ist die Tag-Eingabe eine Zeile.

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

Das textarea-Tag hat kein value , funktioniert aber gut mit dem Lenker

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

Nur für den Fall, dass Sie Angular.js in Ihrem Projekt verwenden (wie ich bin) und einen ng-model für Ihren <textarea> festgelegt haben, setzen Sie den Standardwert wie folgt:

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

...wird nicht funktionieren!

Sie müssen den Standardwert auf ng-model des Textbereichs im entsprechenden Controller setzen oder ng-init verwenden.

Beispiel 1 (mit ng-init):  

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>

Beispiel 2 (ohne ng-init):

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>

8
Rahul Desai

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

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

Das hat auch sehr gut für mich 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'] hiervon:

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

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

4
winthropite

Einige Anmerkungen und Klarstellungen:

  • placeholder='' fügt Ihren Text ein, er ist jedoch ausgegraut (in einem QuickInfo-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 Ersteller von HTML5 beschlossen haben, das nicht zu übernehmen, aber so ist es jetzt.

  • Die beste Methode zum Einfügen von Text in <textarea>-Elemente wurde hier richtig 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 verbleibt im Feld (im Gegensatz zu placeholder='').

  • Hinweis: Wenn Sie Text zwischen die Tags <textarea> und </textarea> einfügen, können Sie placeholder='' nicht verwenden, da er durch den eingefügten Text überschrieben wird.
3
twknab

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>

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

3
A. A.

Sie können this.innerHTML verwenden. 

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

Wenn der Textbereich fokussiert ist, wird die innerHTML des Textbereichs im Allgemeinen zu einer leeren Zeichenfolge.

1
strahd

Bitte beachten Sie dies, wenn Sie Änderungen an Textarea vorgenommen haben, nachdem sie gerendert wurden. 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, unterscheidet sich der Wert von textarea von dem Text zwischen dem öffnenden und dem schließenden Tag des betreffenden Textbereichs.

0
Adeel