Bagaimana cara menyembunyikan teks placeholder secara otomatis menggunakan css atau jquery?

213

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.

jquery  css  html  google-chrome  placeholder 
— LondonBeli
sumber
cehck edit saya, mungkin bisa membantu
— Toni Michel Caubet
Opera juga merupakan browser lain yang menghilangkan placeholder pada fokus.
— Lucas
Firefox pada versi 15 tidak lagi menghapus teks placeholder hingga Anda mulai mengetik. Saya percaya hal yang sama mungkin berlaku untuk IE10 tapi saya tidak punya cara untuk memverifikasi itu.
— Rob Fletcher
1
Saya khawatir tidak ada yang menyebutkan fakta bahwa Anda tidak perlu repot memodifikasi perilaku browser asli. Saya lebih suka bahwa placeholder tetap ada. Itu hanya membantu saya sebagai pengguna akhir, dan ini adalah fitur yang sekarang mulai diterapkan oleh browser ... mungkin karena perilaku yang hilang pada fokus terbukti menjadi masalah kegunaan. Biarkan browser menjadi.
— Ryan Wheale
"Ini dilakukan secara otomatis untuk setiap browser kecuali Chrome." Tidak lagi? Saya baru saja mencoba ini di OSX di Firefox 37.0.2, Safari 7.1.5, dan Chrome 42.0. Tak satu pun dari mereka menghapus teks placeholder hingga saya mulai mengetik, dan semuanya mengembalikannya saat saya menghapus bidang.
— Nathan Long

Jawaban:

261 
<input 
type="text" 
placeholder="enter your text" 
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />
— MatuDuke
sumber
2
Ini membuatnya pergi tetapi ketika saya mengklik jauh dari bidang itu tetap kosong.
— LondonGuy
2
@LondonGuy: Baru saja mengedit posting saya, lihat apakah itu berfungsi seperti yang Anda inginkan. Tapi solusi Toni Michel Caubet lebih baik
— MatuDuke
9
Masalahnya di sini adalah ini JavaScript yang mencolok. Solusi Toni Michel Caubet lebih baik.
— Silkster
Saya suka, tapi sayangnya itu tidak berfungsi baik IE maupun Safari.
— Mohammed Moustafa
— its me
455

Edit: Semua browser mendukung sekarang

input:focus::placeholder {
  color: transparent;
}
<input type="text" placeholder="Type something here!">
Luaskan cuplikan

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+ */
— Rob Fletcher
sumber
1
Jawaban bagus! Saya tidak melihat banyak akal dalam meninggalkan solusi jQuery lama saya yang mendukung HTML5 dan kemudian langsung saja menambahkan JavaScript kembali sebagai perbaikan. Ini hanya solusi yang saya cari.
— nienn
@ MartinHunt sudahkah Anda mencoba ini di FF? input: focus :: - moz-placeholder
— Philip
16
Permintaan maaf untuk pengerukan utas lama, tetapi hanya untuk membuat ini lebih lengkap: input: fokus: -moz-placeholder untuk Firefox 18 dan di bawah, untuk 19 dan seterusnya Anda perlu menggunakan: input: focus :: - moz-placeholder (catatan usus besar ganda). Ref: css-tricks.com/snippets/css/style-placeholder-text
— Peter Lewis
komentar ini adalah kemenangan. bekerja dengan kontrol dinamis, seperti kendo juga
— reflog
1
Jawaban yang bagus juga dari saya! Bagi kita yang mungkin juga memerlukan fungsionalitas ini ketika bidang dinonaktifkan di sini adalah kode CSS: / * Menyembunyikan teks placeholder (jika ada), ketika bidang holding dinonaktifkan * / input: dinonaktifkan :: - webkit-input- placeholder {color: transparan; } input: dinonaktifkan: -moz-placeholder {color: transparent; } input: dinonaktifkan :: - moz-placeholder {color: transparan; } input: dinonaktifkan: -ms-input-placeholder {warna: transparan; }
— Ramanagom
74

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

input:focus::-webkit-input-placeholder {
    opacity: 0;
}
— Casey Chu
sumber
1
Saya suka jawaban ini, tetapi dukungan browser untuk ini belum ada.
— Jerry
44

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.

— JamesWilson
sumber
6
Solusi CSS terbaik!
— Fatih SARI
CSS tua yang bagus ... solusi sederhana yang bagus! Kenapa aku tidak memikirkan itu ??
— JI-Web
40

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/

— Toni Michel Caubet
sumber
Senang melihat atribut data yang digunakan. Tapi saya akan melihat padanan CSS. Saat di-cache itu akan menjadi solusi yang lebih cepat dan bisa mendunia. Di atas perlu atribut data untuk ditempatkan pada setiap elemen yang dibutuhkan. (jawaban di bawah)
— Neil
1
Ini terlalu rumit. Bisa dilakukan dengan kode yang jauh lebih sedikit.
— JGallardo
@JGallardo tunjukkan cahaya (tapi saya tidak yakin jika Anda telah melihat bahwa ada 3 solusi berbeda)
— Toni Michel Caubet
19

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; }
— Adrian Föder
sumber
Persis apa yang saya tulis sekarang (bukan yang saya gunakan opacity:0;)! Satu-satunya solusi CSS di utas ini dengan semua dukungan browser yang memungkinkan!
— ReynekeVosz
11

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.

— Wallace Sidhrée
sumber
3
Ini tidak berfungsi jika Anda memiliki lebih dari satu bidang. Ini adalah versi yang disempurnakan dari kode Anda jsfiddle.net/6CzRq/64
— svlada
10

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'));
        });
    });
};
— mati suri
sumber
5

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;
    }
Luaskan cuplikan

— Mahdi Alkhatib
sumber
5

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;
  }
— Muhammad Bilawal
sumber
4

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 .

— truetone
sumber
4

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;
}
— Hexodus
sumber
4

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 !

— Michael
sumber
3

Bagian CSS ini bekerja untuk saya: 

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

}
— Alex Bondor
sumber
1
Itu cara yang bagus untuk melakukannya tanpa JQuery :)
— tehX
2

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');
});
— Uffo
sumber
1
Ini hanya mengasumsikan satu input.
— Nym
2

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);
         };
     }); 
});
— Karel Sniper Žák
sumber
1

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'));
            });

        });

}
— Suresh Pattu
sumber
gunakan $ ("input [placeholder]") sebagai gantinya untuk hanya memilih bidang yang memiliki atribut placeholder.
— Silkster
Ini adalah jawaban terbaik, sederhana, dan tidak memilih yang lain ketika tidak fokus
— JGallardo
1

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; }
— Wagh
sumber
1 
$("input[placeholder]").focusin(function () {
    $(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
    $(this).attr('placeholder', $(this).data('place-holder-text'));
});
— OsBen
sumber
1 
$("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");
    });
});
— hadi
sumber
0

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; }
Luaskan cuplikan

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

— dufemeng
sumber
Silakan periksa URL ini, akan bermanfaat untuk meningkatkan kualitas konten Anda;
— Willie Cheng
0

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

— Wael Assaf
sumber
0

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;
}
— Rohit Grover
sumber
0

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...'">
— Islam yang indah
sumber
-1 
/* 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; }
— maPer77
sumber
Jawaban ini identik dengan jawaban sebelumnya. Jika Anda memiliki sesuatu untuk ditambahkan atau ditingkatkan, harap sarankan edit untuk jawaban yang asli.
— JonathanDavidArndt
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.