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

349

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?

html textarea

— Newbie Coder
source

1

La façon dont vous montrez est comment cela est censé fonctionner. Montrez votre code HTML si ce n'est pas le cas

— Pekka

montrez votre html s'il vous plaît ...

— Daniel Ramirez-Escudero

1

La suite de réponses à la question sans la tentative de code indiquée. Permet de traiter la question sans cette tentative, de sorte que la question ne soit pas soumise pour "aucun code" ou "peut plus être reproduite" pour des raisons proches.

— Tsyvarev

620

Voici mon exemple jsFiddle . cela fonctionne bien:

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

— Andrew Jackman
source

93

Vous pouvez utiliser l' attribut d' espace réservé , qui n'ajoute pas de valeur par défaut mais peut être ce que vous recherchez:

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

Découvrez-le ici - http://jsfiddle.net/8DzCE/949/

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

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

— bhavya_w
source

14

Vous devez préciser que placeholderne définit pas la valeur de a textarea. Plutôt "L'attribut d'espace réservé représente un bref indice (un mot ou une phrase courte) destiné à aider l'utilisateur à saisir des données lorsque le contrôle n'a pas de valeur" [et il disparaît dès que l'utilisateur clique dans la zone de texte]. Il n'agira jamais comme "la valeur par défaut" pour le contrôle. Si vous le souhaitez, vous devez mettre le texte souhaité à l'intérieur du <textarea>Here is the actual default value</textarea>, selon les autres réponses ici.

— JonBrave

10

Il s'agit en fait d'une solution très dangereuse. Veuillez ne jamais confondre l'espace réservé avec la valeur par défaut.

— Qwerty

@Qwerty - Oui, nous ne devons pas confondre l'espace réservé avec la valeur par défaut. Mais dangereux ... Pouvez-vous indiquer un exemple / cas où et comment il peut être dangereux (capable ou susceptible de causer des dommages ou des blessures)?

— bhavya_w

1

L'espace réservé n'enverra pas de formulaire. C'est dangereux si vous ou votre utilisateur attendez qu'il envoie.

— Qwerty

2

Si la valeur n'est pas soumise, ce n'est pas une valeur par défaut mais plutôt un indice. Si je recherche une valeur par défaut, je m'attends à ce qu'elle se comporte comme une valeur par défaut et ce qui est dangereux, c'est le fait que cela ne présente pas le comportement attendu. Il est dangereux de supposer que cette solution résoudra ce qui a été demandé. Mais il est bon pour vous de penser que je suis à la recherche en effet pour A , mais demander B . Et si vous déclarez implicitement que dans votre réponse, votre réponse sera légitime. Vous avez raison de dire qu'il s'agit d'un manque de connaissances, mais les personnes qui recherchent cette réponse n'ont pas ces connaissances.

— Qwerty

20

Si vous souhaitez importer des informations d'une base de données dans une balise de zone de texte pour modification: La balise d'entrée ne doit pas afficher les données qui occupent plusieurs lignes: les lignes ne fonctionnent pas, la saisie de balise est une ligne.

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

La balise textarea n'a aucune valeur , mais fonctionne correctement avec le guidon

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

— user2519992
source

9

Juste au cas où si vous utilisez Angular.js dans votre projet (comme je le suis) et que vous en avez un ng-modelensemble <textarea>, définissez la valeur par défaut juste à l'intérieur comme:

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

...ne fonctionnera pas!

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

Exemple 1 (en utilisant ng-init):

Afficher l'extrait de code

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>

Développer l'extrait

Exemple 2 (sans utiliser ng-init):

Afficher l'extrait de code

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>

Développer l'extrait

— Rahul Desai
source

1

Ay a trouvé ce stackoverflow.com/a/25391822/2199525 - a rendu les choses encore plus claires.

— leymannx

7

Quelques notes et clarifications:

placeholder='' insère votre texte, mais il est grisé (dans un format de style info-bulle) et au moment où le champ est cliqué, votre texte est remplacé par un champ de texte vide.
value=''n'est pas un <textarea>attribut, et ne fonctionne que pour les <input>balises, c'est-à-dire, <input type='text'>etc. Je ne sais pas pourquoi les créateurs de HTML5 ont décidé de ne pas l'incorporer, mais c'est comme ça pour l'instant.
La meilleure méthode pour insérer du texte dans des <textarea>éléments a été décrite correctement ici: <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 et 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 écrasé par votre texte inséré.

— twknab
source

6

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

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

— Arun Raj
source

4

De plus, 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.

— winthropite
source

3

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>

Il s'agit de la balise si vous l'utilisez pour la connexion à la base de données. Vous pouvez utiliser une syntaxe différente si vous utilisez d'autres langues que php. Pour php:

par exemple:

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

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

— AA
source

1

Vous pouvez utiliser this.innerHTML.

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

Développer l'extrait

Lorsque la zone de texte est focalisée, elle fait essentiellement le innerHTML de la zone de texte une chaîne vide.

— strahd
source

-1

Veuillez noter que si vous avez apporté des modifications à la zone de texte, après son 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 voir, la valeur de textarea sera différente de celle du texte entre les balises d'ouverture et de fermeture de textarea concerné.

— Adeel Raza Azeemi
source

-5

Vous pouvez également ajouter l'attribut "value" et le définir comme ceci:


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

— monstre
source

1

Dans la documentation MDN : " <textarea>ne prend pas en charge l' valueattribut".

— Robby Cornelissen

En écrivant dans React, il vaut la peine de s'aligner sur les spécifications HTML.

— Tomasz Waszczyk