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

html textarea

— Nowicjusz Coder
źródło

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

620

Oto mój przykład jsFiddle . to działa dobrze:

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

— Andrew Jackman
źródło

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/

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

— bhavya_w
źródło

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>

— użytkownik2519992
źródło

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

Pokaż fragment kodu

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>

Rozwiń fragment kodu

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

Pokaż fragment kodu

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>

Rozwiń fragment kodu

— Rahul Desai
źródło

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.

— twknab
źródło

6

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

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

— Arun Raj
źródło

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.

— winthropite
źródło

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.

— AA
źródło

1

Możesz użyć this.innerHTML.

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

Rozwiń fragment kodu

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

— strahd
źródło

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

— Adeel Raza Azeemi
źródło

-5

Możesz także dodać atrybut „wartość” i ustawić go w taki sposób:


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

— potwór
źródło

1

Z dokumentacji MDN : „ <textarea>nie obsługuje valueatrybutu”.

— Robby Cornelissen,

Pisząc w React warto dostosować się do specyfikacji HTML.

— Tomasz Waszczyk