Jak dodać wartość domyślną dla html <textarea>? [Zamknięte]


349

Chcę ustawić wartość domyślną dla mojego HTML <textarea>. Czytam z materiału, że aby dodać wartość domyślną, musisz zrobić coś takiego <textarea>This is default text</textarea>. Zrobiłem to, ale to nie działa. Co należy zrobić?


1
Pokazujesz, jak to ma działać. Pokaż swój kod HTML, jeśli tak nie jest
Pekka

pokaż proszę swój html ...
Daniel Ramirez-Escudero

1
Zestaw odpowiedzi na pytanie bez odnotowanej w nim próby użycia kodu. Potraktujmy to pytanie bez tej próby, aby pytanie nie zostało poddane „bez kodu” lub „może być powielone” z bliskiej przyczyny.
Tsyvarev

Odpowiedzi:



93

Możesz użyć atrybutu zastępczego , który nie dodaje wartości domyślnej, ale może być tym, czego szukasz:

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

Sprawdź to tutaj - http://jsfiddle.net/8DzCE/949/ wprowadź opis zdjęcia tutaj

Ważna uwaga (jak zasugerował Jon Brave w komentarzach) :

Atrybut zastępczy nie ustawia wartości pola tekstowego. Raczej „Atrybut zastępczy reprezentuje krótką wskazówkę (słowo lub krótką frazę), która ma pomóc użytkownikowi we wprowadzaniu danych, gdy formant nie ma żadnej wartości” [i znika, gdy tylko użytkownik kliknie obszar tekstowy]. Nigdy nie będzie działać jako „wartość domyślna” dla kontroli. Jeśli chcesz, musisz umieścić żądany tekst w polu Oto aktualna wartość domyślna, tak jak w przypadku innych odpowiedzi tutaj


14
Powinieneś wyjaśnić, że placeholdernie ustawia wartości a textarea. Raczej „Atrybut zastępczy reprezentuje krótką wskazówkę (słowo lub krótką frazę), która ma pomóc użytkownikowi we wprowadzaniu danych, gdy formant nie ma żadnej wartości” [i znika, gdy tylko użytkownik kliknie obszar tekstowy]. Nigdy nie będzie działać jako „wartość domyślna” dla kontroli. Jeśli chcesz, musisz umieścić żądany tekst wewnątrz <textarea>Here is the actual default value</textarea>, zgodnie z innymi odpowiedziami tutaj.
JonBrave,

10
To jest naprawdę bardzo niebezpieczne rozwiązanie. Proszę nigdy nie mylić symbolu zastępczego z wartością domyślną.
Qwerty,

@Qwerty - Tak, nie powinniśmy mylić symbolu zastępczego z wartością domyślną. Ale niebezpieczne .... Czy możesz podać przykład / przypadek, w którym i jak może być niebezpieczny (zdolny lub mogący spowodować obrażenia lub obrażenia)?
bhavya_w

1
Symbol zastępczy nie wyśle ​​formularza. Jest to niebezpieczne, jeśli Ty lub Twój użytkownik oczekujesz, że wyśle.
Qwerty

2
Jeśli wartość nie zostanie przesłana, nie jest to wartość domyślna, ale podpowiedź. Jeśli szukam wartości domyślnej, oczekuję, że zachowa się ona jako wartość domyślna, a niebezpieczny jest fakt, że nie wykazuje oczekiwanego zachowania. Niebezpieczne jest założenie, że to rozwiązanie rozwiąże problem. Ale to jest poprawne, aby zakładać, że jestem rzeczywiście patrząc na A , ale z prośbą o B . A jeśli pośrednio oświadczysz, że w swojej odpowiedzi, twoja odpowiedź będzie prawdziwa. Masz rację, że chodzi o brak wiedzy, ale ludziom szukającym tej odpowiedzi brakuje tej wiedzy.
Qwerty

20

Jeśli chcesz przenieść informacje z bazy danych do znacznika textarea do edycji: Znacznik wejściowy nie wyświetla danych, które zajmują kilka wierszy: wiersze nie działają, wprowadzanie znaczników to jeden wiersz.

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

Tag textarea nie ma wartości , ale działa dobrze z kierownicą

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

9

Na wszelki wypadek, jeśli używasz Angular.js w swoim projekcie (tak jak ja) i masz dla siebie ng-modelzestaw <textarea>, ustawiając domyślną wartość wewnątrz:

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

...nie będzie działać!

Musisz ustawić wartość domyślną na pola tekstowe ng-modelw odpowiednim kontrolerze lub użyć ng-init.

Przykład 1 (użycie ng-init):

Przykład 2 (bez użycia ng-init):


1
Ay znalazł ten stackoverflow.com/a/25391822/2199525 - sprawił, że wszystko stało się jeszcze jaśniejsze.
leymannx,

7

Kilka uwag i wyjaśnień:

  • placeholder='' wstawia tekst, ale jest wyszarzony (w formacie podpowiedzi), a po kliknięciu pola tekst zostaje zastąpiony pustym polem tekstowym.

  • value=''nie jest <textarea>atrybutem i działa tylko z <input>tagami, tj. <input type='text'>itd. Nie wiem, dlaczego twórcy HTML5 postanowili tego nie uwzględniać, ale na razie tak jest.

  • Najlepsza metoda wstawiania tekstu do <textarea>elementów została tutaj poprawnie opisana jako: <textarea> Desired text to be inserted into the field upon page load </textarea>Gdy użytkownik kliknie pole, może edytować tekst i pozostaje on w polu (w przeciwieństwie do placeholder='').

  • Uwaga: Jeśli wstawisz tekst między tagami <textarea>i </textarea>, nie możesz go użyć, placeholder=''ponieważ zostanie on zastąpiony wstawionym tekstem.

6

Kiedy robię coś takiego, działało to dla mnie:

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

4

Ponadto działało to dla mnie bardzo dobrze:

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

W tym przypadku $ _POST ['encode'] pochodzi z tego:

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

Kod PHP został wstawiony między tagi i.


3

Symbol zastępczy nie może ustawić wartości domyślnej dla pola tekstowego. Możesz użyć

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

Jest to znacznik, jeśli używasz go do połączenia z bazą danych. Możesz użyć innej składni, jeśli używasz innych języków niż php.

na przykład:

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

wymagane polecenie minimalizuje wysiłek potrzebny do sprawdzenia pustych pól za pomocą php.


1

Możesz użyć this.innerHTML.

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

Gdy obszar tekstowy jest skupiony, po prostu sprawia, że ​​innerHTML obszaru tekstowego jest pustym ciągiem.


-1

Pamiętaj, że jeśli dokonałeś zmian w obszarze tekstowym, po jego renderowaniu; Otrzymasz zaktualizowaną wartość zamiast wartości zainicjowanej.

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

Jak widać, wartość pola tekstowego będzie inna niż tekst pomiędzy otwierającym i zamykającym znacznikiem pola tekstowego dotyczącego obaw.


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.