Trình giữ chỗ HTML5 textarea không xuất hiện

183

Tôi không thể tìm ra điều gì sai với đánh dấu của mình, nhưng trình giữ chỗ cho vùng văn bản sẽ không xuất hiện. Dường như nó có thể được che đậy bằng một số khoảng trắng và tab trống. Khi bạn tập trung vào vùng văn bản và xóa từ nơi con trỏ tự đặt, sau đó rời khỏi vùng văn bản, trình giữ chỗ thích hợp sẽ xuất hiện.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
    </head>

    <body>

    <form action="message.php" method="post" id="message_form">
        <fieldset>

            <input type="email" name="email" id="email" title="Email address"
                maxlength="40"
                placeholder="Email Address" 
                autocomplete="off" required />
            <br />
            <input type="text" 
                name="subject" 
                id="subject" title="Subject"
                maxlength="60" placeholder="Subject" autocomplete="off" required />
            <br />
            <textarea name="message" 
                id="message" 
                title="Message" 
                cols="30" 
                rows="5" 
                maxlength="100" 
                placeholder="Message" required>
            </textarea>
            <br />
            <input type="submit" value="Send" id="submit"/>

        </fieldset>
    </form>
</body>

<script>

$(document).ready(function() {        
    $('#message_form').html5form({
        allBrowsers : true,
        responseDiv : '#response',
        messages: 'en',
        messages: 'es',
        method : 'GET',
        colorOn :'#d2d2d2',
        colorOff :'#000'
    }
);
});

</script>

</html>

— rojobuffalo
nguồn

2

Có vẻ hoạt động tốt: jsfiddle.net/3BzBk ... Đừng đặt kịch bản bên ngoài cơ thể :)

— Marco Johannesen

2

Trình duyệt mà bạn đang sử dụng? Không phải tất cả các trình duyệt đều hỗ trợ thuộc tính giữ chỗ

— Xharze

Bạn luôn có thể sử dụng các sự kiện onf Focus và onblur để có được hiệu ứng tương tự. Ngoài ra, bạn có thể kiểm tra xem trình giữ chỗ có được trình duyệt hỗ trợ hay không bằng cách sử dụng một chức năng như: function placeholderIsSupported () {test = document.createEuity ('input'); trả lại ('giữ chỗ' trong thử nghiệm); }

— gentrobot

1

@MarcoJohannesen Cảm ơn bạn! Tôi chưa thể nói chính xác những gì khác nhau nhưng nó hoạt động bây giờ.

— rojobuffalo

1

@ user1338065 Siêu. Có phải vì nó được đặt bên ngoài cơ thể hay không?

— Marco Johannesen

670

Điều này luôn luôn là một gotcha cho tôi và nhiều người khác. Nói tóm lại, các thẻ mở và đóng cho <textarea>phần tử phải nằm trên cùng một dòng, nếu không, một ký tự dòng mới chiếm nó. Do đó, giữ chỗ sẽ không được hiển thị do khu vực đầu vào chứa nội dung (một ký tự dòng mới, về mặt kỹ thuật, nội dung hợp lệ).

Tốt

<textarea></textarea>

Xấu:

<textarea>
</textarea>

Cập nhật (2020)

Điều này không còn đúng nữa, theo thông số phân tích cú pháp HTML5:

If the next token is a U+000A LINE FEED (LF) character token, 
then ignore that token and move on to the next one. (Newlines 
at the start of textarea elements are ignored as an authoring 
convenience.)

Mặc dù vậy, bạn vẫn có thể gặp sự cố nếu biên tập viên khăng khăng đòi kết thúc bằng CRLF.

— Aquarelle
nguồn

66

Man, câu trả lời này rất đơn giản, tôi không tin đó là sự thật! Nhưng tôi đã tự mình thử nghiệm và chắc chắn, khoảng trắng bên trong một vùng văn bản được coi là nội dung - ngăn không cho trình giữ chỗ được hiển thị.

— Eric L.

Nếu plugin đã được chỉnh sửa, bạn có thể khắc phục sự cố này bằng .trimphương pháp của jQuery .

— SpYk3HH

Một ví dụ, chỉ đơn giản là thêm một phần vào JS (trước hoặc sau cuộc gọi plugin, không quan trọng) trông giống như sau:$('textarea'),each(function(i) { if ($.trim($(this).text()) == '') $(this).text('').trigger('blur'); });

— SpYk3HH

Ngoài ra, khi tạo một phần tử textarea mới sau khi DOM được tải, hãy đảm bảo bao gồm thẻ đóng />thay vì >. Ví dụ:$('body').html('<textarea placeholder="test" />');

— thoái hóa

nếu có một khoảng trắng bên trong <textarea>thì có nghĩa là vùng văn bản không trống, vì vậy, không có sử dụng cho trình giữ chỗ. :)

— Edu Ruiz

42

Xóa tất cả các khoảng trắng và ngắt dòng giữa các thẻ <textarea>mở và đóng </textarea>.

<textarea placeholder="YOUR TEXT"></textarea>  ///Correct one

<textarea placeholder="YOUR TEXT"> </textarea>  ///Bad one It's treats as a value so browser won't display the Placeholder value

<textarea placeholder="YOUR TEXT"> 
</textarea>  ///Bad one

— Nhà phát triển chính
nguồn

Không gian giết chết nó? Kỳ dị.

— AndrewLeonardi

2

Nó coi không gian là một giá trị.

— Nhà phát triển chính

9

bởi vì có một không gian ở đâu đó Tôi đã sử dụng jsfiddle và có một khoảng trắng sau thẻ. Sau khi tôi xóa không gian, nó bắt đầu hoạt động.

— matthew
nguồn

Ồ Tôi đã có thẻ textarea đóng trên dòng tiếp theo, thụt vào 4 khoảng trắng> những khoảng trống vô hình đó nằm trong vùng văn bản, nhưng tôi không nhận ra điều đó cho đến khi tôi cố gắng sử dụng trình giữ chỗ. Không có khoảng cách giữa các thẻ textarea mở và đóng!

— DOK

5

Chà, về mặt kỹ thuật, nó không nhất thiết phải nằm trên cùng một dòng miễn là không có ký tự nào giữa dấu kết thúc ">" từ thẻ bắt đầu và "bắt đầu" từ thẻ đóng. Đó là bạn cần kết thúc ...></textarea>như trong ví dụ dưới đây:

<p><label>Comments:<br>
       <textarea id = "comments" rows = "4" cols = "36" 
            placeholder = "Enter comments here"
            class = "valid"></textarea>
    </label>
</p>

— Conny P
nguồn

3

Tôi biết bài đăng này đã được Aquarelle trả lời (rất tốt) nhưng chỉ trong trường hợp ai đó gặp vấn đề này với các hình thức thẻ khác không có văn bản như đầu vào tôi sẽ để lại đây:

Nếu bạn có một đầu vào trong biểu mẫu và trình giữ chỗ của bạn không hiển thị vì khoảng trắng ở đầu, điều này có thể được gây ra cho thuộc tính "value" của bạn. Trong trường hợp bạn đang sử dụng các biến để điền giá trị của kiểm tra đầu vào rằng không có khoảng trắng giữa dấu phẩy và biến.

ví dụ sử dụng twig cho symfony khung php:

<input type="text" name="subject" value="{{ subject }}" placeholder="hello" />       <-- this is ok
<input type="text" name="subject" value" {{ subject }} " placeholder="hello" />      <-- this will not show placeholder

Trong trường hợp này, thẻ giữa {{}} là biến, chỉ cần đảm bảo bạn không để lại khoảng trắng giữa dấu phẩy vì khoảng trắng cũng là một ký tự hợp lệ.

— SpicyTacos23
nguồn

2

sử dụng <textarea></textarea>thay vì chừa một khoảng trống giữa các thẻ mở và đóng như<textarea> </textarea>

— Chưa
nguồn

4

Điều này không thêm gì mà các câu trả lời hiện tại chưa giải quyết.

— Tất cả công nhân là cần thiết

0

Giữa thẻ mở và thẻ đóng trong trường hợp của chúng tôi, thẻ textarea không nên là dấu cách hoặc ký tự dòng mới hoặc bất kỳ văn bản (giá trị) nào.

Nếu có không gian, ký tự dòng mới hoặc bất kỳ văn bản nào, nó được coi là giá trị ghi đè giữ chỗ.

    **PlaceHolder Appears**
    <textarea placeholder="Am Default Message"></textarea>

    **PlaceHolder Doesn't Appear**

    <textarea placeholder="Am Default Message">  </textarea>
   <textarea placeholder="Am Default Message"> 
   </textarea>
   <textarea placeholder="Am Default Message">Something</textarea>

— Yergalem
nguồn

0

Tôi đã có cùng một vấn đề, chỉ sử dụng một .pugtập tin (tương tự .jade). Tôi nhận ra rằng đó cũng là một vấn đề không gian , sau khi kết thúc dấu ngoặc đơn của tôi. Trong ví dụ của tôi, bạn cần làm nổi bật văn bản sau (placeholder="YOUR MESSAGE")để xem:

TRƯỚC:

form.form-horizontal(method='POST')
  .form-group
    textarea.form-control(placeholder="YOUR MESSAGE") 
  .form-group  
    button.btn.btn-primary(type='submit') SUBMIT

SAU:

form.form-horizontal(method='POST')
  .form-group
    textarea.form-control(placeholder="YOUR MESSAGE")
  .form-group  
    button.btn.btn-primary(type='submit') SUBMIT

— maudulus
nguồn

-1

Vì vậy, câu hỏi bây giờ là làm thế nào để chúng ta điền trước phần tử textarea? XYZ, bạn sẽ nhận được:

Vấn đề chính là trong phần tử textarea, chúng ta vô tình làm đầy phần tử bằng khoảng trắng.

— Hani
nguồn