web-dev-qa-db-fra.com

Comment ajouter une valeur par défaut pour html <textarea>?

Je veux définir une valeur par défaut pour mon HTML <textarea>. J'ai lu dans un document que pour ajouter une valeur par défaut, vous devez faire quelque chose comme <textarea>This is default text</textarea>. J'ai fait ça mais ça ne marche pas. Quelle est la bonne chose à faire?

htmltextarea
302
Newbie Coder

Voici mon jsFiddle exemple. cela fonctionne bien:

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

Vous pouvez utiliser espace réservé _ Attribut , qui n'ajoute pas de valeur par défaut mais qui pourrait correspondre à ce que vous recherchez:

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

Allez voir ça ici - http://jsfiddle.net/8DzCE/949/ enter image description here

_ {Note importante} _ (comme suggéré par Jon Brave dans les commentaires) :

L'attribut fictif ne définit pas la valeur d'une zone de texte. Plutôt "L'attribut d'espace réservé représente un indice court (un mot ou une phrase courte) destiné à aider l'utilisateur à saisir des données lorsque le contrôle n'a pas de valeur" [et disparaît dès que l'utilisateur clique sur la zone de texte]. Il ne fera jamais office de "valeur par défaut" pour le contrôle. Si vous le souhaitez, vous devez insérer le texte souhaité dans le champ Voici la valeur par défaut, comme indiqué dans les autres réponses ici

83
bhavya_w

Si vous souhaitez importer des informations d'une base de données dans une balise textarea pour modification: La balise d'entrée n'affiche pas les données occupant plusieurs lignes: rows pas de travail, la saisie de balise est d'une ligne.

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

La balise textarea n’a pas de value, mais fonctionne correctement avec le guidon

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

Juste au cas où vous utiliseriez Angular.js dans votre projet (tel que je suis) et ayez un ng-model défini pour votre <textarea>, définissant la valeur par défaut à l’intérieur, comme suit:

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

...ne fonctionnera pas!

Vous devez définir la valeur par défaut sur ng-model de la zone de texte dans le contrôleur respectif ou utiliser ng-init.

Exemple 1 (avec 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>

Exemple 2 (sans utiliser 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

Quand je fais quelque chose comme ça, ça a fonctionné pour moi:

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

En outre, cela a très bien fonctionné pour moi:

<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>

Dans ce cas, $ _POST ['encode'] provient de ceci:

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

Le code PHP a été inséré entre les balises et.

4
winthropite

Quelques notes et clarifications:

  • placeholder='' insère votre texte, mais celui-ci est grisé (dans un format de style info-bulle) et dès que l'utilisateur clique sur le champ, votre texte est remplacé par un champ de texte vide.

  • value='' n'est pas un attribut <textarea> et ne fonctionne que pour les balises <input>, c.-à-d. <input type='text'>, etc. Je ne sais pas pourquoi les créateurs de HTML5 ont décidé de ne pas l'intégrer, mais c'est comme ça pour l'instant.

  • La meilleure méthode pour insérer du texte dans les éléments <textarea> a été décrite correctement comme suit: <textarea> Desired text to be inserted into the field upon page load </textarea> Lorsque l'utilisateur clique sur le champ, il peut modifier le texte Il reste dans le champ (contrairement à placeholder='').

  • Remarque: Si vous insérez du texte entre les balises <textarea> et </textarea>, vous ne pouvez pas utiliser placeholder='' car il sera remplacé par le texte inséré.
3
twknab

L'espace réservé ne peut pas définir la valeur par défaut pour la zone de texte. Vous pouvez utiliser 

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

Ceci est la balise si vous l'utilisez pour la connexion à une base de données. Vous pouvez utiliser une syntaxe différente si vous utilisez des langages autres que php.Pour php: 

par exemple.:

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

la commande required minimise les efforts nécessaires pour vérifier les champs vides à l'aide de php.

3
A. A.

Vous pouvez utiliser this.innerHTML. 

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

Lorsque la zone de texte est sélectionnée, le code innerHTML de la zone de texte devient une chaîne vide.

1
strahd

Veuillez noter que si vous avez apporté des modifications à textarea après le rendu. Vous obtiendrez la valeur mise à jour au lieu de la valeur initialisée.

<!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>

Comme vous pouvez le constater, la valeur de textarea sera différente de celle du texte entre les balises d'ouverture et de fermeture de l'inquiétude.

0
Adeel