Html <textarea> için varsayılan değer nasıl eklenir? [kapalı]

349

Html için varsayılan bir değer ayarlamak istiyorum <textarea>. Bir materyalden okudum, varsayılan değer eklemek için böyle bir şey yapmalısınız <textarea>This is default text</textarea>. Bunu yaptım ama işe yaramıyor. Yapılacak doğru şey nedir?

html textarea

— Yeni Başlayan Kodlayıcı
kaynak

1

Gösterdiğiniz yol, nasıl çalışması gerektiğidir. HTML kodunuzu göstermezse gösterin

— Pekka

html'nizi gösterin lütfen ...

— Daniel Ramirez-Escudero

1

Kod kodu girilmeden soru için cevaplar paketi . Soruyu bu girişim olmadan ele alalım, bu yüzden soru "kod yok" veya "artık çoğaltılabilir" yakın nedenlerine maruz kalmaz.

— Tsyvarev

620

İşte benim jsFiddle örneği. bu iyi çalışıyor:

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

— Andrew Jackman
kaynak

94

Varsayılan değer eklemeyen ancak aradığınız şey olabilecek yer tutucu Özelliği'ni kullanabilirsiniz :

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

Buradan kontrol edin - http://jsfiddle.net/8DzCE/949/

Önemli Not (Jon Brave tarafından yorumlarda önerildiği gibi) :

Yer Tutucu Özelliği, bir metin alanının değerini ayarlamaz. Bunun yerine "Yer tutucu özniteliği, denetimin değeri olmadığında kullanıcıya veri girişinde yardımcı olmak amacıyla tasarlanmış kısa bir ipucunu (bir kelime veya kısa ifade) temsil eder" [ve kullanıcı metin alanına tıkladığında kaybolur]. Kontrol için asla "varsayılan değer" olarak işlev görmez. İsterseniz, istediğiniz metni burada bulunan diğer varsayılan değerlere göre İşte gerçek varsayılan değerin içine koymalısınız.

— bhavya_w
kaynak

14

Bunu net yapmak gerekir placeholderayarlamaz değeri a textarea. Bunun yerine "Yer tutucu özniteliği, denetimin değeri olmadığında kullanıcıya veri girişinde yardımcı olmak amacıyla tasarlanmış kısa bir ipucunu (bir kelime veya kısa ifade) temsil eder" [ve kullanıcı metin alanına tıkladığında kaybolur]. Kontrol için asla "varsayılan değer" olarak işlev görmez. İsterseniz, <textarea>Here is the actual default value</textarea>burada diğer cevaplara göre istenen metni içine koymalısınız .

— JonBrave

10

Bu aslında çok tehlikeli bir çözüm. Lütfen, yer tutucuyu hiçbir zaman varsayılan değerle karıştırmayın.

— Qwerty

@Qwerty - Evet, yer tutucuyu varsayılan değerle karıştırmamalıyız. Ama tehlikeli .... Nerede ve nasıl tehlikeli olabileceği (zarar veya yaralanmaya neden olabileceği veya muhtemel olabileceği) herhangi bir örnek / durum söyleyebilir misiniz?

— bhavya_w

1

Yer tutucu bir form göndermeyecektir. Siz veya kullanıcı gönderilmesini beklerseniz bu tehlikelidir.

— Qwerty

2

Değer gönderilmezse, varsayılan bir değer değil, bir ipucudur. Varsayılan bir değer arıyorsanız, varsayılan değer olarak davranmasını bekliyoruz ve tehlikeli olan bu beklenen davranış sergilememesi gerçeğidir. Tehlikeli, bu çözümün istenenleri çözeceğini varsaymaktır. Ama gerçekten A'yı aradığımı , ancak B'yi istediğimi varsaymanız doğru . Ve cevabınızda bunu dolaylı olarak belirtirseniz, cevabınız yasal olacaktır. Bunun bilgi eksikliği ile ilgili olduğu konusunda haklısınız, ancak bu cevabı arayan insanlar bu bilgiye sahip değiller.

— Qwerty

20

Veritabanından bilgileri düzenleme için bir textarea etiketine getirmek istiyorsanız: Giriş satırı, birden fazla satır içeren verileri görüntülemez: satırlar işe yaramaz, etiket girişi bir satırdır.

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

Textarea etiketinin değeri yok , ancak gidonlarla iyi çalışıyor

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

— user2519992
kaynak

9

Projenizde (olduğum gibi) Angular.js kullanıyorsanız ve sizin için bir ng-modelsetiniz varsa <textarea>, varsayılanı içeride olduğu gibi ayarlayın:

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

...çalışmayacak!

Varsayılan değeri ng-model, ilgili denetleyicideki veya kullanımdaki metin alanına ayarlamanız gerekir ng-init.

Örnek 1 (kullanma ng-init):

Kod snippet'ini göster

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>

Snippet'i genişlet

Örnek 2 (kullanmadan ng-init):

Kod snippet'ini göster

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>

Snippet'i genişlet

— Rahul Desai
kaynak

1

Ay bu stackoverflow.com/a/25391822/2199525 - işleri daha da netleştirdi.

— leymannx

7

Birkaç not ve açıklama:

placeholder='' metninizi ekler, ancak gri renkte görünür (araç ipucu stili biçiminde) ve alan tıklandığında metniniz boş bir metin alanıyla değiştirilir.
value=''bir <textarea>özellik değildir ve yalnızca <input>etiketler için çalışır , yani, <input type='text'>vb.
Öğelere metin eklemek için en iyi yöntem <textarea>burada doğru bir şekilde özetlenmiştir: <textarea> Desired text to be inserted into the field upon page load </textarea>Kullanıcı alanı tıkladığında, metni düzenleyebilir ve alanda kalır (aksine placeholder='').
Not: <textarea>ve </textarea>etiketleri arasına metin eklerseniz placeholder='', eklenen metninizin üzerine yazılacağı için onu kullanamazsınız .

— twknab
kaynak

6

Böyle bir şey yaptığımda benim için çalıştı:

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

— Arun Raj
kaynak

4

Ayrıca, bu benim için çok iyi çalıştı:

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

Bu durumda, $ _POST ['encode'] şu kaynaktan geldi:

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

PHP kodu ve etiketleri arasına eklenmiştir.

— winthropite
kaynak

3

Yer tutucu, metin alanı için varsayılan değeri ayarlayamaz. Kullanabilirsiniz

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

Veritabanı bağlantısı için kullanıyorsanız bu etikettir. Php dışında bir dil kullanıyorsanız farklı sözdizimi kullanabilirsiniz. Php için:

Örneğin:

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

gerekli komut php kullanarak boş alanları kontrol etmek için gereken çabayı en aza indirir.

— AA
kaynak

1

This.innerHTML kullanabilirsiniz.

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

Snippet'i genişlet

Metin alanı odaklandığında, temel olarak textarea'nın innerHTML'sini boş bir dize yapar.

— strahd
kaynak

-1

Metin alanında değişiklik yaptıktan sonra, yayınlandıktan sonra lütfen unutmayın; Başlangıç değeri yerine güncellenmiş değeri alırsınız.

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

Gördüğünüz gibi, textarea değeri endişe textarea açılış ve kapanış etiketi arasındaki metinden farklı olacaktır.

— Adeel Raza Azeemi
kaynak

-5

Ayrıca "değer" özniteliğini ekleyebilir ve bunu şöyle bir şekilde ayarlayabilirsiniz:


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

— monsterpiece
kaynak

1

Gönderen MDN belgelerinde : " <textarea>desteklemez valueniteliği".

— Robby Cornelissen

React'te yazmak, HTML spesifikasyonuyla hizalanmaya değer.

— Tomasz Waszczyk