Bu, Chrome hariç her tarayıcı için otomatik olarak yapılır .

Özellikle Chrome'u hedeflemem gerektiğini tahmin ediyorum .

Herhangi bir çözüm var mı?

CSS ile değilse , o zaman jQuery ile ?

Saygılarımla.

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

Düzenle: Tüm tarayıcılar artık destekleniyor

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

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

Firefox 15 ve IE 10+ şimdi de bunu destekliyor. Casey Chu'nun CSS çözümünü genişletmek için :

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+ */

İşte sadece CSS çözümü (şimdilik sadece WebKit'te çalışıyor):

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

Saf CSS Çözümü (JS gerekmez)

@Hexodus ve @Casey Chu'nun cevaplarına dayanarak, yer tutucu metnin solması için CSS opaklığından ve geçişlerinden yararlanan güncellenmiş ve tarayıcılar arası bir çözüm. textareaVe inputetiketleri içeren yer tutucuları kullanabilen herhangi bir öğe için çalışır .

::-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 */

Düzenleme: Modern tarayıcıları desteklemek için güncellendi.

placeholder attr denediniz mi?

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

-DÜZENLE-

Anlıyorum, bunu deneyin o zaman:

$(function () {

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

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


});

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

-DÜZENLE-

Aslında, yer tutucu girdinin adını değil değeri tanımlamak için kullanılmalıdır. Aşağıdaki alternatifi öneririm

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

Ölçek:

http://jsfiddle.net/kwynwrcf/

@ Casey-chu ve pirate rob'un cevabını artırmak için, tarayıcılar arası daha uyumlu bir yol var:

    /* 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; }

Toni'nın cevabı iyi, ama ben bırakın IDve açıkça kullanmak istiyorum input, bu şekilde tüm girdiler placeholderdavranış almak:

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

Bunun $(function(){ });kısayoluna dikkat edin $(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.

Bunu isim alanında paketlemek ve "yer tutucu" özelliğine sahip öğeler üzerinde çalışmak istiyorum ...

$("[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'));
        });
    });
};

Bazen stillerinizin en güçlü faktörle uygulandığından emin olmak için SPECIFICITY gerekir id. @Rob Fletcher için harika cevabı için teşekkürler

Bu nedenle, lütfen uygulama kapsayıcısının kimliğine ön ekli stiller eklemeyi düşünün

    #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;
    }

Pure CSS ile benim için çalıştı. Girildiğinde / Girişte Odaklandığında saydam yap

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

Wallace Sidhrée'nin kod örneğini daha da hassaslaştırmak için :

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

Bu, her girdinin veri özniteliğinde doğru yer tutucu metnini saklamasını sağlar.

JsFiddle'da çalışan bir örneğe bakın .

Geçişlerle baharatlanmış css yaklaşımını seviyorum. Odakta yer tutucu kaybolur;) Textareas için de çalışır.

Harika fikir için @Casey Chu'ya teşekkürler.

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

SCSS'yi http://bourbon.io/ ile birlikte kullanan bu çözüm basit, zariftir ve tüm web tarayıcılarında çalışır:

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

Bourbon kullan! Bu senin için iyi !

Bu CSS parçası benim için çalıştı:

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

}

Saf CSS tabanlı bir çözüm için:

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

Not: Henüz tüm tarayıcı satıcıları tarafından desteklenmemektedir.

Referans: Ilia Raiskin'in CSS ile odaktaki yer tutucu metnini gizle .

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 ÇÖZÜM: Tüm girdiler için global olarak çalışıyor, yer tutuculu tek metin.

 $(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 burada: jsfiddle

Bunu dene :

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

        });

}

giriş için

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

metin için

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

Yukarıdakilerin yanı sıra, iki fikrim var.

Yer tutucuyu taklit eden bir öğe ekleyebilirsiniz. Ardından javascript kullanarak gösterilen ve gizlenen öğeyi kontrol edin.

Ama bu çok karmaşık, diğeri kardeşin css seçicisini kullanıyor.

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

23333, zayıf bir İngilizcem var.Sorununuzu çözmeyi umuyoruz.

bu işlevi deneyin:

+ PlaceHolder'ı odakta gizler ve bulanıklığa geri döndürür

+ Bu işlev, yer tutucu seçiciye bağlıdır, önce yer tutucu özniteliğine sahip öğeleri seçer, odaklama üzerinde bir işlevi ve bulanıklaştırma için başka bir işlevi tetikler.

odakta: değerini yer tutucu özelliğinden alan öğeye "veri-metin" niteliğini ekler, ardından yer tutucu özelliğinin değerini kaldırır.

bulanıklaştırmada: yer tutucu değerini döndürür ve veri-metin özelliğinden kaldırır

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

giriş elemanını inceleyerek perde arkasında neler olup bittiğine bakarsanız beni çok iyi takip edebilirsiniz.

Aynı şeyi açısal 5'te uyguladım.

yer tutucu depolamak için yeni bir dize oluşturdum

newPlaceholder:string;

sonra giriş kutusu odaklama ve bulanıklık işlevleri kullandım (Başbakan otomatik tamamlama kullanıyorum).

Yukarıdaki yer tutucu dizgiden ayarlanıyor

Kullandığım iki işlev -

/* 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;
}

Herhangi bir CSS veya JQuery kullanmaya gerek yoktur. Doğrudan HTML giriş etiketinden yapabilirsiniz.

Örneğin , aşağıdaki e-posta kutusunda, yer tutucu metni içeri tıkladıktan sonra kaybolacak ve dışarı tıklandığında metin tekrar görünecektir.

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