Làm cách nào để thêm giá trị mặc định cho html <textarea>? [đóng cửa]

349

Tôi muốn đặt một giá trị mặc định cho html của tôi <textarea>. Tôi đọc từ một tài liệu rằng để thêm giá trị mặc định, bạn phải làm một cái gì đó như thế nào <textarea>This is default text</textarea>. Tôi đã làm điều đó nhưng nó không hoạt động. Điều gì là đúng để làm gì?

html textarea

— Mã hóa người mới
nguồn

1

Cách bạn thể hiện là cách nó hoạt động. Hiển thị mã HTML của bạn nếu không

— Pekka

vui lòng hiển thị html của bạn ...

— Daniel Ramirez-Escudero

1

Bộ câu trả lời cho câu hỏi mà không có mã cố gắng ghi chú trong đó. Hãy xử lý câu hỏi mà không có nỗ lực này, vì vậy câu hỏi sẽ không phải chịu "không có mã" hoặc "có thể được sao chép lại" những lý do gần gũi.

— Tsyvarev

620

Đây là ví dụ jsFiddle của tôi . cái này hoạt động tốt

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

— Andrew Jackman
nguồn

93

Bạn có thể sử dụng Thuộc tính giữ chỗ , không thêm giá trị mặc định nhưng có thể là những gì bạn đang tìm kiếm:

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

Kiểm tra nó ở đây - http://jsfiddle.net/8DzCE/949/

Lưu ý quan trọng (Theo đề xuất của Jon Brave trong các bình luận) :

Thuộc tính giữ chỗ không đặt giá trị của một vùng văn bản. Thay vào đó "Thuộc tính giữ chỗ thể hiện một gợi ý ngắn (một từ hoặc cụm từ ngắn) nhằm mục đích hỗ trợ người dùng nhập dữ liệu khi điều khiển không có giá trị" [và nó biến mất ngay khi người dùng nhấp vào vùng văn bản]. Nó sẽ không bao giờ đóng vai trò là "giá trị mặc định" cho điều khiển. Nếu bạn muốn điều đó, bạn phải đặt văn bản mong muốn bên trong Đây là giá trị mặc định thực tế, theo các câu trả lời khác ở đây

— bhavya_w
nguồn

14

Bạn nên làm rõ rằng placeholderkhông đặt giá trị của a textarea. Thay vào đó "Thuộc tính giữ chỗ thể hiện một gợi ý ngắn (một từ hoặc cụm từ ngắn) nhằm mục đích hỗ trợ người dùng nhập dữ liệu khi điều khiển không có giá trị" [và nó biến mất ngay khi người dùng nhấp vào vùng văn bản]. Nó sẽ không bao giờ đóng vai trò là "giá trị mặc định" cho điều khiển. Nếu bạn muốn điều đó, bạn phải đặt văn bản mong muốn bên trong <textarea>Here is the actual default value</textarea>, như các câu trả lời khác ở đây.

— JonBrave

10

Đây thực sự là một giải pháp rất nguy hiểm. Xin vui lòng, đừng bao giờ nhầm lẫn giữ chỗ với giá trị mặc định.

— Qwerty

@Qwerty - Có, chúng ta không nên nhầm lẫn giữ chỗ với giá trị mặc định. Nhưng nguy hiểm .... Bạn có thể nêu bất kỳ ví dụ / trường hợp nào và làm thế nào nó có thể nguy hiểm (có thể hoặc có thể gây hại hoặc thương tích) không?

— bhavya_w

1

Giữ chỗ sẽ không gửi trong một hình thức. Điều đó là nguy hiểm nếu bạn hoặc người dùng của bạn mong đợi nó gửi.

— Qwerty

2

Nếu giá trị sẽ không được gửi, đó không phải là giá trị mặc định mà là một gợi ý. Nếu tôi đang tìm kiếm một giá trị mặc định, tôi hy vọng nó sẽ hoạt động như một giá trị mặc định và điều nguy hiểm là thực tế là điều này không thể hiện hành vi dự kiến. Nguy hiểm là giả định giải pháp này sẽ giải quyết những gì được yêu cầu. Nhưng đó là đúng cho bạn cho rằng tôi đang thực sự tìm kiếm một , nhưng yêu cầu B . Và nếu bạn ngầm nói rằng trong câu trả lời của bạn, câu trả lời của bạn sẽ là hợp pháp. Bạn đúng rằng đây là về việc thiếu kiến thức, nhưng những người tìm kiếm câu trả lời này lại thiếu kiến thức này.

— Qwerty

20

Nếu bạn muốn đưa thông tin từ cơ sở dữ liệu vào thẻ textarea để chỉnh sửa: Thẻ đầu vào không hiển thị dữ liệu chiếm nhiều dòng: hàng không hoạt động, đầu vào thẻ là một dòng.

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

Thẻ textarea không có giá trị , nhưng hoạt động tốt với tay lái

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

— người dùng2519992
nguồn

9

Chỉ trong trường hợp nếu bạn đang sử dụng Angular.js trong dự án của mình (như tôi) và có một ng-modelbộ cho bạn <textarea>, hãy đặt mặc định ngay bên trong như:

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

...sẽ không làm việc!

Bạn cần đặt giá trị mặc định cho textarea ng-modeltrong bộ điều khiển tương ứng hoặc sử dụng ng-init.

Ví dụ 1 (sử dụng ng-init):

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

Ví dụ 2 (không sử dụng ng-init):

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

— La Mã
nguồn

1

Ay tìm thấy stackoverflow.com/a/25391822/2199525 - làm cho mọi thứ thậm chí rõ ràng hơn.

— leymannx 4/11/2015

7

Một vài lưu ý và làm rõ:

placeholder='' chèn văn bản của bạn, nhưng nó bị mờ đi (ở định dạng kiểu đầu công cụ) và thời điểm trường được nhấp, văn bản của bạn được thay thế bằng trường văn bản trống.
value=''không phải là một <textarea>thuộc tính và chỉ hoạt động cho <input>các thẻ, tức là, <input type='text'>v.v. Tôi không biết tại sao những người tạo ra HTML5 quyết định không kết hợp điều đó, nhưng đó là cách nó hiện tại.
Phương pháp tốt nhất để chèn văn bản vào <textarea>các thành phần đã được phác thảo chính xác ở đây là: <textarea> Desired text to be inserted into the field upon page load </textarea>Khi người dùng nhấp vào trường, họ có thể chỉnh sửa văn bản và nó vẫn nằm trong trường (không giống như placeholder='').
Lưu ý: Nếu bạn chèn văn bản giữa <textarea>và </textarea>các thẻ, bạn không thể sử dụng placeholder=''vì nó sẽ bị ghi đè bởi văn bản được chèn của bạn.

— twknab
nguồn

6

Khi tôi làm một cái gì đó như thế này, nó đã làm việc cho tôi:

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

— Arun Raj
nguồn

4

Ngoài ra, điều này làm việc rất tốt cho tôi:

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

Trong trường hợp này, $ _POST ['encode'] xuất phát từ đây:

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

Mã PHP đã được chèn giữa và các thẻ.

— winthropite
nguồn

3

Trình giữ chỗ không thể đặt giá trị mặc định cho vùng văn bản. Bạn có thể dùng

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

Đây là thẻ nếu bạn đang sử dụng nó để kết nối cơ sở dữ liệu. Bạn có thể sử dụng cú pháp khác nhau nếu bạn đang sử dụng các ngôn ngữ khác ngoài php.For php:

ví dụ:

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

lệnh bắt buộc giảm thiểu các nỗ lực cần thiết để kiểm tra các trường trống bằng cách sử dụng php.

— Ôi
nguồn

1

Bạn có thể sử dụng this.innerHTML.

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

Mở rộng đoạn trích

Khi vùng văn bản được tập trung, về cơ bản, nó làm cho phần bên trong của văn bản thành một chuỗi trống.

— strahd
nguồn

-1

Xin lưu ý rằng nếu bạn đã thực hiện thay đổi đối với textarea, sau khi nó được kết xuất; Bạn sẽ nhận được giá trị cập nhật thay vì giá trị khởi tạo.

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

Như bạn có thể thấy giá trị của textarea sẽ khác với văn bản ở giữa thẻ mở và đóng của textarea quan tâm.

— Adeel Raza Azeemi
nguồn

-5

Bạn cũng có thể thêm thuộc tính "value" và thiết lập một thứ tương tự như vậy:


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

— quái vật
nguồn

1

Từ tài liệu MDN : " <textarea>không hỗ trợ valuethuộc tính".

— Robby Cornelissen

Viết bằng React rất đáng để phù hợp với đặc tả HTML.

— Tomasz Waszchot