Bagaimana cara menambahkan nilai default untuk html <textarea>? [Tutup]

349

Saya ingin menetapkan nilai default untuk html saya <textarea>. Saya membaca dari bahan yang untuk menambah nilai default Anda harus melakukan sesuatu seperti <textarea>This is default text</textarea>. Saya melakukan itu tetapi tidak berhasil. Apa hal yang benar untuk dilakukan?

html textarea

— Pemula Pemula
sumber

1

Cara Anda menunjukkan cara kerjanya seharusnya. Tampilkan kode HTML Anda jika tidak

— Pekka

tolong tunjukkan html Anda ...

— Daniel Ramirez-Escudero

1

Paket jawaban untuk pertanyaan tanpa upaya kode yang tercantum di dalamnya. Mari kita menangani pertanyaan tanpa usaha ini, sehingga pertanyaan tidak akan dikenai "alasan tidak ada kode" atau "dapat direproduksi lagi" dengan alasan yang dekat.

— Tsyvarev

620

Ini adalah contoh jsFiddle saya . ini berfungsi dengan baik:

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

— Andrew Jackman
sumber

93

Anda dapat menggunakan Atribut placeholder , yang tidak menambahkan nilai default tetapi mungkin apa yang Anda cari:

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

Lihat di sini - http://jsfiddle.net/8DzCE/949/

Catatan Penting (Seperti yang disarankan oleh Jon Brave dalam komentar) :

Atribut Placeholder tidak menetapkan nilai textarea. Alih-alih "Atribut placeholder mewakili petunjuk singkat (kata atau frasa pendek) yang dimaksudkan untuk membantu pengguna dengan entri data ketika kontrol tidak memiliki nilai" [dan menghilang begitu pengguna mengklik ke dalam textarea]. Itu tidak akan pernah bertindak sebagai "nilai default" untuk kontrol. Jika Anda menginginkannya, Anda harus meletakkan teks yang diinginkan di dalam Here adalah nilai default aktual, seperti jawaban lain di sini

— bhavya_w
sumber

14

Anda harus memperjelas bahwa placeholdertidak menetapkan nilai a textarea. Alih-alih "Atribut placeholder mewakili petunjuk singkat (kata atau frasa pendek) yang dimaksudkan untuk membantu pengguna dengan entri data ketika kontrol tidak memiliki nilai" [dan menghilang begitu pengguna mengklik ke dalam textarea]. Itu tidak akan pernah bertindak sebagai "nilai default" untuk kontrol. Jika Anda menginginkannya, Anda harus meletakkan teks yang diinginkan di dalam <textarea>Here is the actual default value</textarea>, sesuai jawaban lain di sini.

— JonBrave

10

Ini sebenarnya solusi yang sangat berbahaya. Tolong, jangan pernah mengacaukan placeholder dengan nilai default.

— Qwerty

@Qwerty - Ya, kami tidak boleh mengacaukan placeholder dengan nilai default. Tapi berbahaya .... Bisakah Anda menyebutkan contoh / kasus di mana dan bagaimana itu bisa berbahaya (dapat atau mungkin menyebabkan bahaya atau cedera)?

— bhavya_w

1

Placeholder tidak akan mengirim formulir. Itu berbahaya jika Anda atau pengguna Anda mengharapkannya untuk dikirim.

— Qwerty

2

Jika nilainya tidak akan dikirimkan, itu bukan nilai default melainkan petunjuk. Jika saya mencari nilai default, saya berharap untuk berperilaku sebagai nilai default dan yang berbahaya adalah kenyataan bahwa ini tidak menunjukkan perilaku yang diharapkan. Berbahaya adalah dengan menganggap solusi ini akan menyelesaikan apa yang diminta. Tapi itu benar bagi Anda untuk berasumsi bahwa saya memang mencari A , tapi meminta B . Dan jika Anda secara implisit menyatakan bahwa dalam jawaban Anda, jawaban Anda akan sah. Anda benar bahwa ini adalah tentang kurangnya pengetahuan, tetapi orang yang mencari jawaban ini memang tidak memiliki pengetahuan ini.

— Qwerty

20

Jika Anda ingin membawa informasi dari database ke tag textarea untuk diedit: Tag input tidak untuk menampilkan data yang menempati beberapa baris: baris tidak berfungsi, input tag adalah satu baris.

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

Tag textarea tidak memiliki nilai , tetapi berfungsi baik dengan setang

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

— pengguna2519992
sumber

9

Untuk jaga-jaga jika Anda menggunakan Angular.js dalam proyek Anda (seperti saya) dan memiliki ng-modelset untuk Anda <textarea>, pengaturan default tepat di dalam seperti:

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

...tidak akan bekerja!

Anda perlu mengatur nilai default ke textarea ng-modeldi controller atau gunakan masing-masing ng-init.

Contoh 1 (menggunakan ng-init):

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Contoh 2 (tanpa menggunakan ng-init):

Tampilkan cuplikan kode

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>

Luaskan cuplikan

— Rahul Desai
sumber

1

Ay menemukan ini stackoverflow.com/a/25391822/2199525 - membuat segalanya lebih jelas.

— leymannx

7

Beberapa catatan dan klarifikasi:

placeholder='' menyisipkan teks Anda, tetapi berwarna abu-abu (dalam format gaya tip alat) dan saat bidang diklik, teks Anda diganti dengan bidang teks kosong.
value=''bukan <textarea>atribut, dan hanya berfungsi untuk <input>tag, yaitu, <input type='text'>dll. Saya tidak tahu mengapa pembuat HTML5 memutuskan untuk tidak memasukkannya, tetapi itulah caranya sekarang.
Metode terbaik untuk memasukkan teks ke dalam <textarea>elemen telah diuraikan dengan benar di sini sebagai: <textarea> Desired text to be inserted into the field upon page load </textarea>Ketika pengguna mengklik bidang, mereka dapat mengedit teks dan itu tetap di lapangan (tidak seperti placeholder='').
Catatan: Jika Anda menyisipkan teks di antara tag <textarea>dan </textarea>, Anda tidak dapat menggunakan placeholder=''karena akan ditimpa oleh teks yang dimasukkan.

— twknab
sumber

6

Ketika saya melakukan sesuatu seperti ini, itu berhasil untuk saya:

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

— Arun Raj
sumber

4

Juga, ini bekerja sangat baik untuk saya:

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

Dalam hal ini, $ _POST ['encode'] berasal dari ini:

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

Kode PHP disisipkan di antara tag dan.

— winthropite
sumber

3

Placeholder tidak dapat menetapkan nilai default untuk area teks. Kamu bisa menggunakan

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

Ini adalah tag jika Anda menggunakannya untuk koneksi basis data. Anda dapat menggunakan sintaks yang berbeda jika Anda menggunakan bahasa lain selain php. Untuk php:

misalnya:

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

perintah yang diperlukan meminimalkan upaya yang diperlukan untuk memeriksa bidang kosong menggunakan php.

— A A
sumber

1

Anda dapat menggunakan this.innerHTML.

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

Luaskan cuplikan

Ketika area teks terfokus, itu pada dasarnya membuat innerHTML teks adalah string kosong.

— strahd
sumber

-1

Harap perhatikan bahwa jika Anda membuat perubahan pada textarea, setelah itu diubah; Anda akan mendapatkan nilai yang diperbarui daripada nilai yang diinisialisasi.

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

Seperti yang Anda lihat nilai textarea akan berbeda dari teks di antara tag pembuka dan penutup dari textarea terkait.

— Adeel Raza Azeemi
sumber

-5

Anda juga dapat menambahkan atribut "nilai" dan mengaturnya jadi seperti ini:


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

— rakasa
sumber

1

Dari dokumentasi MDN : " <textarea>tidak mendukung valueatribut".

— Robby Cornelissen

Menulis dalam Bereaksi layak untuk disejajarkan dengan spesifikasi HTML.

— Tomasz Waszczyk