Ini dilakukan secara otomatis untuk setiap browser kecuali Chrome .

Saya kira saya harus secara khusus menargetkan Chrome .

Ada solusi?

Jika tidak dengan CSS , lalu dengan jQuery ?

Salam.

<input 
type="text" 
placeholder="enter your text" 
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />

Edit: Semua browser mendukung sekarang

input:focus::placeholder {
  color: transparent;
}

<input type="text" placeholder="Type something here!">

Firefox 15 dan IE 10+ juga mendukung ini sekarang. Untuk memperluas solusi CSS Casey Chu :

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

Berikut ini adalah solusi khusus CSS (untuk saat ini, hanya berfungsi di WebKit):

input:focus::-webkit-input-placeholder {
    opacity: 0;
}

Solusi CSS Murni (tidak perlu JS)

Mengembangkan jawaban @Hexodus dan @Casey Chu, berikut ini adalah solusi lintas-peramban yang diperbarui yang memanfaatkan opacity CSS dan transisi untuk memudarkan teks placeholder. Ini berfungsi untuk elemen apa pun yang dapat menggunakan placeholder, termasuk textareadan inputtag.

::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome <=56, Safari < 10 */
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */

*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */

Sunting: Diperbarui untuk mendukung peramban modern.

Sudahkah Anda mencoba placeholder attr?

<input id ="myID" type="text" placeholder="enter your text " />

-EDIT-

Begitu ya, coba ini:

$(function () {

    $('#myId').data('holder', $('#myId').attr('placeholder'));

    $('#myId').focusin(function () {
        $(this).attr('placeholder', '');
    });
    $('#myId').focusout(function () {
        $(this).attr('placeholder', $(this).data('holder'));
    });


});

Uji: http://jsfiddle.net/mPLFf/4/

-EDIT-

Sebenarnya, karena placeholder harus digunakan untuk menggambarkan nilai, bukan nama input. Saya menyarankan alternatif berikut

html:

<label class="overlabel"> 
    <span>First Name</span>
    <input name="first_name" type="text" />
</label>

javascript:

$('.overlabel').each(function () {
    var $this = $(this);
    var field = $this.find('[type=text], [type=file], [type=email], [type=password], textarea');
    var span = $(this).find('> span');
    var onBlur = function () {
        if ($.trim(field.val()) == '') {
            field.val('');
            span.fadeIn(100);
        } else {
            span.fadeTo(100, 0);
        }
    };
    field.focus(function () {
        span.fadeOut(100);
    }).blur(onBlur);
    onBlur();
});

css:

.overlabel {
  border: 0.1em solid;
  color: #aaa;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  min-height: 2.2em;
}
.overlabel span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overlabel span, .overlabel input {
  text-align: left;
  font-size: 1em;
  line-height: 2em;
  padding: 0 0.5em;
  margin: 0;
  background: transparent;
  -webkit-appearance: none; /* prevent ios styling */
  border-width: 0;
  width: 100%;
  outline: 0;
}

Uji:

http://jsfiddle.net/kwynwrcf/

Untuk menambah jawaban @ casey-chu dan bajak laut, inilah cara yang lebih kompatibel lintas browser:

    /* WebKit browsers */
input:focus::-webkit-input-placeholder { color:transparent; }

    /* Mozilla Firefox 4 to 18 */
input:focus:-moz-placeholder { color:transparent; }

    /* Mozilla Firefox 19+ */
input:focus::-moz-placeholder { color:transparent; }

    /* Internet Explorer 10+ */
input:focus:-ms-input-placeholder { color:transparent; }

Jawaban Toni baik, tapi saya lebih suka menghentikan IDdan menggunakan secara eksplisit input, dengan begitu semua input dengan placeholderperilaku:

<input type="text" placeholder="your text" />

Perhatikan itu $(function(){ });adalah singkatan untuk $(document).ready(function(){ });:

$(function(){
    $('input').data('holder',$('input').attr('placeholder'));
    $('input').focusin(function(){
        $(this).attr('placeholder','');
    });
    $('input').focusout(function(){
        $(this).attr('placeholder',$(this).data('holder'));
    });
})

Demo.

Saya suka mengemas ini di ruang nama dan menjalankan elemen dengan atribut "placeholder" ...

$("[placeholder]").togglePlaceholder();

$.fn.togglePlaceholder = function() {
    return this.each(function() {
        $(this)
        .data("holder", $(this).attr("placeholder"))
        .focusin(function(){
            $(this).attr('placeholder','');
        })
        .focusout(function(){
            $(this).attr('placeholder',$(this).data('holder'));
        });
    });
};

Terkadang Anda membutuhkan SPESIFIKASI untuk memastikan gaya Anda diterapkan dengan faktor terkuat idTerima kasih atas @Rob Fletcher atas jawaban yang luar biasa, di perusahaan kami, kami telah menggunakan

Jadi harap pertimbangkan untuk menambahkan gaya yang diawali dengan id wadah aplikasi

    #app input:focus::-webkit-input-placeholder, #app  textarea:focus::-webkit-input-placeholder {
        color: #FFFFFF;
    }

    #app input:focus:-moz-placeholder, #app textarea:focus:-moz-placeholder {
        color: #FFFFFF;
    }

Dengan Pure CSS itu berhasil untuk saya. Jadikan transparan saat Dimasuki / Focues dalam input

 input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: transparent !important;
 }
 input:focus::-moz-placeholder { /* Firefox 19+ */
   color: transparent !important;
 }
 input:focus:-ms-input-placeholder { /* IE 10+ */
   color: transparent !important;
 }
 input:focus:-moz-placeholder { /* Firefox 18- */
   color: transparent !important;
  }

Untuk lebih mempertajam contoh kode Wallace Sidhrée :

$(function()
{  
      $('input').focusin(function()
      {
        input = $(this);
        input.data('place-holder-text', input.attr('placeholder'))
        input.attr('placeholder', '');
      });

      $('input').focusout(function()
      {
          input = $(this);
          input.attr('placeholder', input.data('place-holder-text'));
      });
})

Ini memastikan bahwa setiap input menyimpan teks placeholder yang benar dalam atribut data.

Lihat contoh kerja di sini di jsFiddle .

Saya suka pendekatan css dibumbui dengan transisi. Pada Fokus, placeholder menghilang;) Juga berfungsi untuk textareas.

Terima kasih @Casey Chu untuk ide bagusnya.

textarea::-webkit-input-placeholder, input::-webkit-input-placeholder { 
    color: #fff;
    opacity: 0.4;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s; 
}

textarea:focus::-webkit-input-placeholder, input:focus::-webkit-input-placeholder  { 
    opacity: 0;
}

Menggunakan SCSS bersama dengan http://bourbon.io/ , solusi ini sederhana, elegan, dan berfungsi di semua browser web:

input:focus {
  @include placeholder() {
    color: transparent;
  }
}

Gunakan Bourbon! Itu bagus untuk Anda !

Bagian CSS ini bekerja untuk saya:

input:focus::-webkit-input-placeholder {
        color:transparent;

}

Untuk solusi berbasis CSS murni:

input:focus::-webkit-input-placeholder  {color:transparent;}
input:focus::-moz-placeholder   {color:transparent;}
input:-moz-placeholder   {color:transparent;}

Catatan: Belum didukung oleh semua vendor browser.

Referensi: Sembunyikan teks placeholder pada fokus dengan CSS oleh Ilia Raiskin.

HTML:

<input type="text" name="name" placeholder="enter your text" id="myInput" />

jQuery:

$('#myInput').focus(function(){
  $(this).attr('placeholder','');
});
$('#myInput').focusout(function(){
  $(this).attr('placeholder','enter your text');
});

2018> JQUERY v.3.3 SOLUSI: Bekerja secara global untuk semua input, textarea dengan placeholder.

 $(function(){
     $('input, textarea').on('focus', function(){
        if($(this).attr('placeholder')){
           window.oldph = $(this).attr('placeholder');
            $(this).attr('placeholder', ' ');
        };
     });

     $('input, textarea').on('blur', function(){
       if($(this).attr('placeholder')){
            $(this).attr('placeholder', window.oldph);
         };
     }); 
});

Demo ada di sini: jsfiddle

Coba ini :

//auto-hide-placeholder-text-upon-focus
if(!$.browser.webkit){
$("input").each(
        function(){
            $(this).data('holder',$(this).attr('placeholder'));
            $(this).focusin(function(){
                $(this).attr('placeholder','');
            });
            $(this).focusout(function(){
                $(this).attr('placeholder',$(this).data('holder'));
            });

        });

}

untuk input

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }

untuk textarea

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }

$("input[placeholder]").focusin(function () {
    $(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
    $(this).attr('placeholder', $(this).data('place-holder-text'));
});

$("input[placeholder]").each(function () {
    $(this).attr("data-placeholder", this.placeholder);

    $(this).bind("focus", function () {
        this.placeholder = '';
    });
    $(this).bind("blur", function () {
        this.placeholder = $(this).attr("data-placeholder");
    });
});

Selain semua hal di atas, saya punya dua ide.

Anda dapat menambahkan elemen yang meniru pemilik palen. Kemudian menggunakan kontrol javascript elemen yang menunjukkan dan menyembunyikan.

Tapi itu sangat kompleks, yang lain menggunakan pemilih saudara laki-laki cs. Hanya seperti ini:

.placeholder { position: absolute; font-size: 14px; left: 40px; top: 11px; line-height: 1; pointer-events: none; }
.send-message input:focus + .placeholder { display: none; } 

23333, saya memiliki bahasa Inggris yang buruk. Semoga Anda menyelesaikan masalah Anda.

coba fungsi ini:

+ Ini Menyembunyikan TempatPegang Pada Fokus Dan Mengembalikannya Pada Blur

+ Fungsi ini tergantung pada pemilih placeholder, pertama memilih elemen dengan atribut placeholder, memicu fungsi pada pemfokusan dan fungsi lainnya pada pengaburan.

pada fokus: ia menambahkan atribut "data-teks" ke elemen yang mendapatkan nilainya dari atribut placeholder kemudian menghapus nilai atribut placeholder.

on blur: mengembalikan nilai placeholder dan menghapusnya dari atribut data-teks

<input type="text" placeholder="Username" />

$('[placeholder]').focus(function() {
    $(this).attr('data-text', $(this).attr('placeholder'));
    $(this).attr('placeholder', '');
  }).blur(function() {
      $(this).attr('placeholder', $(this).attr('data-text'));
      $(this).attr('data-text', '');
  });
});

Anda dapat mengikuti saya dengan baik jika Anda melihat apa yang terjadi di balik layar dengan memeriksa elemen input

Hal yang sama saya terapkan di sudut 5.

saya membuat string baru untuk menyimpan placeholder

newPlaceholder:string;

maka saya telah menggunakan fungsi fokus dan blur pada kotak input (saya menggunakan prime ng autocomplete).

Placeholder di atas sedang diatur dari naskah

Dua fungsi yang saya gunakan -

/* Event fired on focus to textbox*/
Focus(data) {
    this.newPlaceholder = data.target.placeholder;
    this.placeholder = '';
}
/* Event fired on mouse out*/
Blur(data) {
    this.placeholder = this.newPlaceholder;
}

Tidak perlu menggunakan CSS atau JQuery. Anda dapat melakukannya langsung dari tag input HTML.

Misalnya , Di kotak email di bawah ini, teks placeholder akan hilang setelah mengklik di dalam dan teks akan muncul lagi jika diklik di luar.

<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">

/* Webkit */
[placeholder]:focus::-webkit-input-placeholder { opacity: 0; }
/* Firefox < 19 */
[placeholder]:focus:-moz-placeholder { opacity: 0; }
/* Firefox > 19 */
[placeholder]:focus::-moz-placeholder { opacity: 0; }
/* Internet Explorer 10 */
[placeholder]:focus:-ms-input-placeholder { opacity: 0; }