Come aggiungere il valore predefinito per html <textarea>? [chiuso]

349

Voglio impostare un valore predefinito per il mio HTML <textarea>. Ho letto da un materiale che per aggiungere un valore predefinito devi fare qualcosa del genere <textarea>This is default text</textarea>. L'ho fatto ma non funziona. Qual è la cosa giusta da fare?

html textarea

— Newbie Coder
fonte

1

Il modo in cui mostri è come dovrebbe funzionare. Mostra il tuo codice HTML in caso contrario

— Pekka,

mostra il tuo html per favore ...

— Daniel Ramirez-Escudero,

1

La suite di risposte per la domanda senza il tentativo di codice annotato in essa. Consente di trattare la domanda senza questo tentativo, quindi la domanda non verrebbe soggetta per "nessun codice" o "può essere più riprodotta" per motivi ravvicinati.

— Tsyvarev,

620

Ecco il mio esempio di jsFiddle . funziona benissimo:

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

— Andrew Jackman
fonte

93

Puoi utilizzare l' attributo segnaposto , che non aggiunge un valore predefinito ma potrebbe essere quello che stai cercando:

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

Dai un'occhiata qui - http://jsfiddle.net/8DzCE/949/

Nota importante (come suggerito da Jon Brave nei commenti) :

L'attributo segnaposto non imposta il valore di un'area di testo. Piuttosto "L'attributo segnaposto rappresenta un breve suggerimento (una parola o una frase breve) inteso ad aiutare l'utente con l'immissione di dati quando il controllo non ha valore" [e scompare non appena l'utente fa clic nell'area di testo]. Non fungerà mai da "valore predefinito" per il controllo. Se lo desideri, devi inserire il testo desiderato all'interno di Ecco il valore predefinito effettivo, come da altre risposte qui

— bhavya_w
fonte

14

Dovresti chiarire che placeholdernon imposta il valore di a textarea. Piuttosto "L'attributo segnaposto rappresenta un breve suggerimento (una parola o una frase breve) inteso ad aiutare l'utente con l'immissione di dati quando il controllo non ha valore" [e scompare non appena l'utente fa clic nell'area di testo]. Non fungerà mai da "valore predefinito" per il controllo. Se lo desideri, devi inserire il testo desiderato all'interno di <textarea>Here is the actual default value</textarea>, come da altre risposte qui.

— JonBrave,

10

Questa è in realtà una soluzione molto pericolosa. Per favore, non confondere mai il segnaposto con il valore predefinito.

— Qwerty,

@Qwerty - Sì, non dovremmo confondere il segnaposto con il valore predefinito. Ma pericoloso .... Puoi indicare qualsiasi esempio / caso in cui e in che modo può essere pericoloso (in grado o suscettibile di causare danni o lesioni)?

— bhavya_w,

1

Il segnaposto non invierà un modulo. Ciò è pericoloso se tu o il tuo utente prevedete che invii.

— Qwerty,

2

Se il valore non viene inviato, non è un valore predefinito ma piuttosto un suggerimento. Se sto cercando un valore predefinito, mi aspetto che si comporti come valore predefinito e ciò che è pericoloso è il fatto che ciò non mostri il comportamento previsto. È pericoloso supporre che questa soluzione risolverà ciò che è stato richiesto. Ma è giusto per voi di assumere che sto davvero cercando A , ma chiedendo B . E se lo affermi implicitamente nella tua risposta, la tua risposta sarà legittima. Hai ragione sul fatto che si tratta della mancanza di conoscenza, ma alle persone che cercano questa risposta manca questa conoscenza.

— Qwerty,

20

Se si desidera portare informazioni da un database in un tag textarea per la modifica: il tag di input non consente di visualizzare i dati che occupano più righe: righe senza lavoro, input di tag è una riga.

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

Il tag textarea non ha valore , ma funziona bene con i manubri

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

— user2519992
fonte

9

Nel caso in cui stai usando Angular.js nel tuo progetto (come lo sono io) e hai un ng-modelset per il tuo <textarea>, impostando il default proprio dentro come:

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

...non funzionerà!

È necessario impostare il valore predefinito su textarea ng-modelnel rispettivo controller o utilizzare ng-init.

Esempio 1 (usando ng-init):

Mostra snippet di codice

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>

Espandi frammento

Esempio 2 (senza usare ng-init):

Mostra snippet di codice

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>

Espandi frammento

— Rahul Desai
fonte

1

Ay ha trovato questo stackoverflow.com/a/25391822/2199525 - ha reso le cose ancora più chiare.

— leymannx,

7

Alcune note e chiarimenti:

placeholder='' inserisce il testo, ma viene visualizzato in grigio (in un formato di tipo suggerimento) e nel momento in cui si fa clic sul campo, il testo viene sostituito da un campo di testo vuoto.
value=''non è un <textarea>attributo e funziona solo per i <input>tag, ad esempio, <input type='text'>ecc. Non so perché i creatori di HTML5 abbiano deciso di non incorporarlo, ma per ora è così.
Il metodo migliore per inserire il testo negli <textarea>elementi è stato delineato correttamente qui come: <textarea> Desired text to be inserted into the field upon page load </textarea>Quando l'utente fa clic sul campo, può modificare il testo e rimane nel campo (a differenza placeholder='').
Nota: se si inserisce del testo tra i tag <textarea>e </textarea>, non è possibile utilizzarlo placeholder=''poiché verrà sovrascritto dal testo inserito.

— twknab
fonte

6

Quando faccio qualcosa del genere ha funzionato per me:

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

— Arun Raj
fonte

4

Inoltre, questo ha funzionato molto bene per me:

<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 questo caso, $ _POST ['encode'] è venuto da questo:

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

Il codice PHP è stato inserito tra i tag e.

— winthropite
fonte

3

Il segnaposto non può impostare il valore predefinito per l'area di testo. Puoi usare

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

Questo è il tag se lo si utilizza per la connessione al database. È possibile utilizzare una sintassi diversa se si utilizzano lingue diverse da php.Per php:

per esempio:

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

il comando richiesto minimizza gli sforzi necessari per controllare i campi vuoti usando php.

— aa
fonte

1

Puoi usare this.innerHTML.

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

Espandi frammento

Quando l'area di testo è focalizzata, fondamentalmente rende l'HTML interno dell'area di testo una stringa vuota.

— Strahd
fonte

-1

Nota che se hai apportato modifiche a textarea, dopo che è stato eseguito il rendering; Otterrai il valore aggiornato anziché il valore inizializzato.

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

Come puoi vedere, il valore di textarea sarà diverso dal testo tra il tag di apertura e chiusura del textarea interessato.

— Adeel Raza Azeemi
fonte

-5

Puoi anche aggiungere l'attributo "valore" e impostarlo in questo modo:


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

— Monsterpiece
fonte

1

Dalla documentazione MDN : " <textarea>non supporta l' valueattributo".

— Robby Cornelissen,

Scrivendo in React vale la pena allinearsi con le specifiche HTML.

— Tomasz Waszczyk,