Làm cách nào để tạo một hộp văn bản HTML hiển thị một gợi ý khi trống?

Tôi muốn hộp tìm kiếm trên trang web của mình hiển thị từ "Tìm kiếm" bằng chữ in nghiêng màu xám. Khi hộp nhận được tiêu điểm, nó sẽ trông giống như một hộp văn bản trống. Nếu đã có văn bản trong đó, nó sẽ hiển thị văn bản bình thường (màu đen, không in nghiêng). Điều này sẽ giúp tôi tránh lộn xộn bằng cách loại bỏ nhãn.

BTW, đây là một tìm kiếm Ajax trên trang , vì vậy nó không có nút.

Một tùy chọn khác, nếu bạn vui mừng chỉ có tính năng này cho các trình duyệt mới hơn, là sử dụng hỗ trợ được cung cấp bởi thuộc tính giữ chỗ của HTML 5 :

<input name="email" placeholder="Email Address">

Trong trường hợp không có bất kỳ kiểu nào, trong Chrome, giao diện này sẽ như sau:

Bạn có thể thử các bản demo ở đây và trong Kiểu dáng giữ chỗ HTML5 bằng CSS .

Hãy chắc chắn kiểm tra tính tương thích của trình duyệt của tính năng này . Hỗ trợ trong Firefox đã được thêm vào trong 3.7. Chrome vẫn ổn. Internet Explorer chỉ thêm hỗ trợ trong 10. Nếu bạn nhắm mục tiêu trình duyệt không hỗ trợ trình giữ chỗ đầu vào, bạn có thể sử dụng plugin jQuery có tên jQuery HTML5 Placeholder , sau đó chỉ cần thêm mã JavaScript sau để bật.

$('input[placeholder], textarea[placeholder]').placeholder();

Điều đó được gọi là hình mờ hộp văn bản và được thực hiện thông qua JavaScript.

• http://naspinski.net/post/Text-Input-Watermark-USE-Javascript-(IE-Compiverse).aspx

hoặc nếu bạn sử dụng jQuery, một cách tiếp cận tốt hơn nhiều:

• http://digitalbush.com/projects/watermark-input-plugin/
• hoặc code.google.com/p/jquery-watermark

Bạn có thể đặt giữ chỗ bằng cách sử dụng placeholderthuộc tính trong HTML ( hỗ trợ trình duyệt ). Các font-stylevà colorcó thể được thay đổi với CSS (mặc dù hỗ trợ trình duyệt được giới hạn).

input[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */
 color:gray;
 font-style:italic;
}
input[type=search]:-moz-placeholder { /* Firefox 18- */
 color:gray;
 font-style:italic;
}
input[type=search]::-moz-placeholder { /* Firefox 19+ */
 color:gray;
 font-style:italic;
}
input[type=search]:-ms-input-placeholder { /* IE (10+?) */
 color:gray;
 font-style:italic;
}

<input placeholder="Search" type="search" name="q">

Bạn có thể thêm và xóa một lớp CSS đặc biệt và sửa đổi giá trị đầu vào onfocus/ onblurbằng JavaScript:

<input type="text" class="hint" value="Search..."
    onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
    onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">

Sau đó, chỉ định một lớp gợi ý với kiểu dáng bạn muốn trong CSS của bạn, ví dụ:

input.hint {
    color: grey;
}

Cách tốt nhất là kết nối các sự kiện JavaScript của bạn bằng cách sử dụng một số loại thư viện JavaScript như jQuery hoặc YUI và đặt mã của bạn vào tệp .js bên ngoài.

Nhưng nếu bạn muốn một giải pháp nhanh và bẩn thì đây là giải pháp HTML nội tuyến của bạn:

<input type="text" id="textbox" value="Search"
    onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}" 
    onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />

Cập nhật : Đã thêm các công cụ tô màu được yêu cầu.

Tôi đã đăng một giải pháp cho điều này trên trang web của tôi một thời gian trước đây. Để sử dụng nó, hãy nhập một .jstệp duy nhất :

<script type="text/javascript" src="/hint-textbox.js"></script>

Sau đó chú thích bất kỳ đầu vào nào bạn muốn có gợi ý với lớp CSS hintTextbox:

<input type="text" name="email" value="enter email" class="hintTextbox" />

Thêm thông tin và ví dụ có sẵn ở đây .

Đây là một ví dụ chức năng với bộ đệm thư viện Google Ajax và một số phép thuật jQuery.

Đây sẽ là CSS:

<style type="text/stylesheet" media="screen">
    .inputblank { color:gray; }  /* Class to use for blank input */
</style>

Đây sẽ là mã JavaScript:

<script language="javascript"
        type="text/javascript"
        src="http://www.google.com/jsapi">
</script>
<script>
    // Load jQuery
    google.load("jquery", "1");

    google.setOnLoadCallback(function() {
        $("#search_form")
            .submit(function() {
                alert("Submitted. Value= " + $("input:first").val());
                return false;
        });

        $("#keywords")
            .focus(function() {
                if ($(this).val() == 'Search') {
                    $(this)
                    .removeClass('inputblank')
                    .val('');
                }
            })
            .blur(function() {
                if ($(this).val() == '') {
                    $(this)
                    .addClass('inputblank')
                    .val('Search');
                }
            });
    });
</script>

Và đây sẽ là HTML:

<form id="search_form">
    <fieldset>
        <legend>Search the site</legend>
            <label for="keywords">Keywords:</label>
        <input id="keywords" type="text" class="inputblank" value="Search"/>
    </fieldset>
</form>

Tôi hy vọng nó đủ để khiến bạn quan tâm đến cả GAJAXLib và jQuery.

Bây giờ nó trở nên rất dễ dàng. Trong html chúng ta có thể cung cấp thuộc tính giữ chỗ cho các yếu tố đầu vào .

ví dụ

<input type="text" name="fst_name" placeholder="First Name"/>

kiểm tra để biết thêm chi tiết: http://www.w3schools.com/tags/att_input_placeholder.asp

Đối với người dùng jQuery: liên kết jQuery của naspinski có vẻ bị hỏng, nhưng hãy thử liên kết này: http://remysharp.com/2007/01/11/jquery-tutorial-text-box-hint/

Bạn nhận được một hướng dẫn plugin jQuery miễn phí như một phần thưởng. :)

Tôi thấy plugin jQuery Watermark tốt hơn cái được liệt kê trong câu trả lời hàng đầu. Tại sao tốt hơn? Bởi vì nó hỗ trợ các trường nhập mật khẩu. Ngoài ra, việc đặt màu của hình mờ (hoặc các thuộc tính khác) cũng dễ như tạo .watermarktham chiếu trong tệp CSS của bạn.

Điều này được gọi là "hình mờ".

Tôi tìm thấy plugin jQuery hình mờ jQuery , không giống như câu trả lời đầu tiên, không yêu cầu thiết lập thêm (câu trả lời ban đầu cũng cần một cuộc gọi đặc biệt trước khi gửi biểu mẫu).

Sử dụng Trình thông báo biểu mẫu jQuery - đây là một trong những trình cắm jQuery phổ biến nhất và không gặp phải lỗi mà một số đề xuất jQuery khác ở đây thực hiện (ví dụ: bạn có thể tự do tạo kiểu hình mờ, mà không lo lắng liệu nó có được lưu vào cơ sở dữ liệu).

jQuery Watermark sử dụng một kiểu CSS trực tiếp trên các thành phần của biểu mẫu (Tôi nhận thấy rằng các thuộc tính kích thước phông chữ CSS được áp dụng cho hình mờ cũng ảnh hưởng đến các hộp văn bản - không phải là điều tôi muốn). Điểm cộng với jQuery Watermark là bạn có thể kéo thả văn bản vào các trường (Trình thông báo biểu mẫu jQuery không cho phép điều này).

Một số khác được đề xuất bởi một số người khác (một trong số tại digitalbrush.com), sẽ vô tình gửi giá trị hình mờ vào biểu mẫu của bạn, vì vậy tôi thực sự khuyên bạn nên chống lại nó.

Sử dụng hình nền để hiển thị văn bản:

 input.foo { }
 input.fooempty { background-image: url("blah.png"); }

Sau đó, tất cả những gì bạn phải làm là phát hiện value == 0và áp dụng đúng lớp:

 <input class="foo fooempty" value="" type="text" name="bar" />

Và mã JavaScript jQuery trông như thế này:

jQuery(function($)
{
    var target = $("input.foo");
    target.bind("change", function()
    {
        if( target.val().length > 1 )
        {
            target.addClass("fooempty");
        }
        else
        {
            target.removeClass("fooempty");
        }
    });
});

Bạn có thể dễ dàng có một hộp đọc "Tìm kiếm" sau đó khi tiêu điểm được thay đổi thành nó sẽ xóa văn bản. Một cái gì đó như thế này:

<input onfocus="this.value=''" type="text" value="Search" />

Tất nhiên, nếu bạn làm điều đó, văn bản của chính người dùng sẽ biến mất khi họ nhấp vào. Vì vậy, bạn có thể muốn sử dụng một cái gì đó mạnh mẽ hơn:

<input name="keyword_" type="text" size="25"  style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">

Khi trang tải lần đầu tiên, Tìm kiếm sẽ xuất hiện trong hộp văn bản, màu xám nếu bạn muốn.

Khi hộp nhập nhận được tiêu điểm, chọn tất cả văn bản trong hộp tìm kiếm để người dùng có thể bắt đầu nhập, sẽ xóa văn bản đã chọn trong quy trình. Điều này cũng sẽ hoạt động tốt nếu người dùng muốn sử dụng hộp tìm kiếm lần thứ hai vì họ sẽ không phải làm nổi bật văn bản trước đó để xóa nó.

<input type="text" value="Search" onfocus="this.select();" />

Tôi thích giải pháp của "Chikuse kiến ​​thức" - đơn giản và rõ ràng. Chỉ cần thêm một cuộc gọi để làm mờ khi tải trang đã sẵn sàng sẽ đặt trạng thái ban đầu:

$('input[value="text"]').blur();

Bạn muốn chỉ định một cái gì đó như thế này để tập trung:

if (this.value == this.defaultValue)
    this.value = ''
this.className = ''

và điều này để onblur:

if (this.value == '')
    this.value = this.defaultValue
this.className = 'placeholder'

(Bạn có thể sử dụng một cái gì đó thông minh hơn một chút, như hàm khung, để thực hiện chuyển đổi tên lớp nếu bạn muốn.)

Với một số CSS như thế này:

input.placeholder{
    color: gray;
    font-style: italic;
}

Tôi đang sử dụng một giải pháp javascript đơn giản, một dòng hoạt động tuyệt vời. Dưới đây là một ví dụ cho cả textbox và textarea:

    <textarea onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">Text</textarea>

    <input type="text" value="Text" onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">

chỉ "nhược điểm" là xác thực ở mức $ _POST hoặc xác thực Javascript trước khi làm bất cứ điều gì với giá trị của trường. Có nghĩa là, kiểm tra xem giá trị của trường không phải là "Văn bản".

$('input[value="text"]').focus(function(){ 
if ($(this).attr('class')=='hint') 
{ 
   $(this).removeClass('hint'); 
   $(this).val(''); 
}
});

$('input[value="text"]').blur(function(){
  if($(this).val() == '')
  {
    $(this).addClass('hint');
    $(this).val($(this).attr('title'));
  } 
});

<input type="text" value="" title="Default Watermark Text">

Thẻ 'bắt buộc' đơn giản Html rất hữu ích.

<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>

Nó chỉ định rằng một trường đầu vào phải được điền trước khi gửi biểu mẫu hoặc nhấn nút gửi. Đây là ví dụ

Người dùng AJAXToolkit từ http://asp.net