Bagaimana cara membuat kotak teks HTML menunjukkan petunjuk saat kosong?

Saya ingin kotak pencarian di halaman web saya untuk menampilkan kata "Cari" dengan huruf miring abu-abu. Ketika kotak menerima fokus, itu akan terlihat seperti kotak teks kosong. Jika sudah ada teks di dalamnya, itu akan menampilkan teks secara normal (hitam, non-miring). Ini akan membantu saya menghindari kekacauan dengan menghapus label.

BTW, ini adalah pencarian Ajax pada halaman , sehingga tidak memiliki tombol.

Opsi lain, jika Anda senang memiliki fitur ini hanya untuk browser yang lebih baru, adalah menggunakan dukungan yang ditawarkan oleh atribut placeholder HTML 5 :

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

Dengan tidak adanya gaya apa pun, di Chrome ini terlihat seperti:

Anda dapat mencoba demo di sini dan di HTML5 Placeholder Styling dengan CSS .

Pastikan untuk memeriksa kompatibilitas browser dari fitur ini . Dukungan di Firefox telah ditambahkan di 3.7. Chrome baik-baik saja. Internet Explorer hanya menambahkan dukungan di 10. Jika Anda menargetkan browser yang tidak mendukung input placeholder, Anda dapat menggunakan plugin jQuery yang disebut jQuery HTML5 Placeholder , dan kemudian tambahkan saja kode JavaScript berikut untuk mengaktifkannya.

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

Itu dikenal sebagai tanda air kotak teks, dan dilakukan melalui JavaScript.

• http://naspinski.net/post/Text-Input-Watermarks-using-Javascript-(IE-Compatible).aspx

atau jika Anda menggunakan jQuery, pendekatan yang jauh lebih baik:

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

Anda dapat mengatur placeholder menggunakan placeholderatribut dalam HTML ( dukungan browser ). Itu font-styledan colordapat diubah dengan CSS (meskipun dukungan browser terbatas).

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

Anda dapat menambah dan menghapus kelas CSS khusus dan memodifikasi nilai input onfocus/ onblurdengan 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...'; }">

Kemudian tentukan kelas petunjuk dengan gaya yang Anda inginkan di CSS Anda misalnya:

input.hint {
    color: grey;
}

Cara terbaik adalah memasang acara JavaScript Anda menggunakan semacam perpustakaan JavaScript seperti jQuery atau YUI dan memasukkan kode Anda ke dalam file .js-eksternal.

Tetapi jika Anda menginginkan solusi cepat dan kotor, ini adalah solusi HTML inline Anda:

<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'}" />

Diperbarui : Menambahkan barang pewarna yang diminta.

Saya memposting solusi untuk ini di situs web saya beberapa waktu lalu. Untuk menggunakannya, impor satu .jsfile:

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

Lalu beri catatan input apa pun yang Anda ingin memiliki petunjuk dengan kelas CSS hintTextbox:

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

Informasi dan contoh lebih lanjut tersedia di sini .

Berikut adalah contoh fungsional dengan cache perpustakaan Google Ajax dan beberapa sihir jQuery.

Ini akan menjadi CSS:

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

Ini akan menjadi kode 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>

Dan ini akan menjadi 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>

Saya harap itu cukup untuk membuat Anda tertarik pada GAJAXLibs dan jQuery.

Sekarang menjadi sangat mudah. Dalam html kita bisa memberikan atribut placeholder untuk elemen input .

misalnya

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

periksa lebih detail: http://www.w3schools.com/tags/att_input_placeholder.asp

Untuk pengguna jQuery: tautan jQuery naspinski tampaknya rusak, tetapi coba yang ini: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

Anda mendapatkan tutorial plugin jQuery gratis sebagai bonus. :)

Saya menemukan plugin jQuery jQuery Watermark lebih baik daripada yang terdaftar di jawaban atas. Mengapa lebih baik Karena mendukung bidang input kata sandi. Juga, mengatur warna tanda air (atau atribut lainnya) semudah membuat .watermarkreferensi di file CSS Anda.

Ini disebut "tanda air".

Saya menemukan plugin jQuery jQuery watermark yang, tidak seperti jawaban pertama, tidak memerlukan pengaturan tambahan (jawaban aslinya juga membutuhkan panggilan khusus untuk sebelum formulir dikirimkan).

Gunakan jQuery Form Notifier - ini adalah salah satu plugin jQuery paling populer dan tidak menderita bug seperti yang dilakukan saran jQuery lainnya (misalnya, Anda dapat dengan bebas mendesain watermark, tanpa khawatir jika itu akan disimpan ke basis data).

jQuery Watermark menggunakan gaya CSS tunggal langsung pada elemen bentuk (saya perhatikan bahwa properti ukuran font CSS yang diterapkan pada tanda air juga memengaruhi kotak teks - bukan yang saya inginkan). Tanda plus dengan jQuery Watermark adalah Anda dapat menyeret-jatuhkan teks ke dalam bidang (Notifier Formulir jQuery tidak mengizinkan ini).

Yang lain disarankan oleh beberapa orang lain (yang di digitalbrush.com), secara tidak sengaja akan mengirimkan nilai tanda air ke formulir Anda, jadi saya sangat menyarankan untuk tidak melakukannya.

Gunakan gambar latar belakang untuk merender teks:

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

Maka yang harus Anda lakukan adalah mendeteksi value == 0dan menerapkan kelas yang tepat:

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

Dan kode JavaScript jQuery terlihat seperti ini:

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

Anda dapat dengan mudah meminta sebuah kotak membaca "Cari" kemudian ketika fokus diubah sehingga teks dihapus. Sesuatu seperti ini:

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

Tentu saja jika Anda melakukannya, teks pengguna sendiri akan hilang ketika mereka mengklik. Jadi, Anda mungkin ingin menggunakan sesuatu yang lebih kuat:

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

Saat halaman pertama dimuat, ada Pencarian muncul di kotak teks, berwarna abu-abu jika Anda inginkan.

Ketika kotak input menerima fokus, pilih semua teks dalam kotak pencarian sehingga pengguna bisa mulai mengetik, yang akan menghapus teks yang dipilih dalam proses. Ini juga akan berfungsi dengan baik jika pengguna ingin menggunakan kotak pencarian untuk kedua kalinya karena mereka tidak perlu secara manual menyorot teks sebelumnya untuk menghapusnya.

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

Saya suka solusi "Knowledge Chikuse" - sederhana dan jelas. Hanya perlu menambahkan panggilan untuk mengaburkan saat memuat halaman siap yang akan mengatur keadaan awal:

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

Anda ingin menetapkan sesuatu seperti ini ke onfocus:

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

dan ini untuk blur:

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

(Anda dapat menggunakan sesuatu yang sedikit lebih pintar, seperti fungsi kerangka kerja, untuk melakukan pengalihan classname jika Anda mau.)

Dengan beberapa CSS seperti ini:

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

Saya menggunakan solusi javascript sederhana, satu baris yang sangat bagus. Berikut adalah contoh untuk textbox dan 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'; }">

hanya "downside" yang akan divalidasi pada $ _POST atau dalam validasi Javascript sebelum melakukan apa pun dengan nilai bidang. Artinya, memeriksa bahwa nilai bidang bukan "Teks".

$('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">

Tag 'wajib' Html sederhana bermanfaat.

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

Ini menentukan bahwa bidang input harus diisi sebelum mengirimkan formulir atau tekan tombol kirim. Berikut ini contohnya

Pengguna AJAXToolkit dari http://asp.net