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?


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,

Risposte:



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/ inserisci qui la descrizione dell'immagine

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


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> 

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

Esempio 2 (senza usare ng-init):


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.

6

Quando faccio qualcosa del genere ha funzionato per me:

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

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.


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.


1

Puoi usare this.innerHTML.

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

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


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


Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.