Це робиться автоматично для кожного браузера, крім Chrome .

Я здогадуюсь, що мені потрібно спеціально націлити Chrome .

Будь-які рішення?

Якщо не з CSS , то з jQuery ?

З повагою.

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

Редагувати: Усі веб-переглядачі підтримують зараз

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

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

Firefox 15 і IE 10+ також підтримують це зараз. Для розширення CSS Кейсі Чу рішення :

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

Ось лише рішення CSS (поки що працює лише у WebKit):

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

Чистий CSS-розчин (не потрібен JS)

Спираючись на відповіді @Hexodus та @Casey Chu, ось оновлене та крос-браузерне рішення, яке використовує непрозорість і переходи CSS, щоб вимкнути текст заповнювача. Він працює для будь-якого елемента, який може використовувати заповнювачі, включаючи textareaта inputтеги.

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

Редагувати: оновлено для підтримки сучасних браузерів.

ви спробували заповнити attr?

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

-EDIT-

Я бачу, спробуйте це:

$(function () {

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

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


});

Тест: http://jsfiddle.net/mPLFf/4/

-EDIT-

Насправді, оскільки заповнювач заповнення повинен використовуватися для опису значення, а не імені вводу. Я пропоную наступну альтернативу

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

Тест:

http://jsfiddle.net/kwynwrcf/

Щоб збільшити відповідь @ casey-chu та піратського грабу, ось більш сумісний спосіб для браузера:

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

Відповідь Тоні хороша, але я б краще відмовитись IDі явно використовувати input, таким чином, всі вхідні дані placeholderотримують поведінку:

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

Зауважте, що $(function(){ });це скорочення для $(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'));
    });
})

Демо

Мені подобається упакувати це в простір імен і працювати на елементах з атрибутом "заповнювач" ...

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

Іноді вам потрібна СПЕЦИФІЧНІСТЬ, щоб переконатися, що ваші стилі застосовуються з найсильнішим факторомid Дякуємо @Rob Fletcher за його чудову відповідь, в нашій компанії ми використовували

Тому, будь ласка, подумайте про додавання стилів з префіксом ідентифікатора контейнера додатків

    #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 це працювало для мене. Зробіть його прозорим при введенні / фокусування вхідних даних

 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 :

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

Це гарантує, що кожен вхід зберігає правильний текст заповнення в атрибуті даних.

Дивіться робочий приклад тут у jsFiddle .

Мені подобається підхід css, переповнений переходами. На фокусі заповнювач затухає;) Працює також для текстових областей.

Дякую @Casey Chu за чудову ідею.

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 разом із http://bourbon.io/ , це рішення є простим, елегантним та працює у всіх веб-браузерах:

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

Використовуйте Бурбон! Це добре для вас!

Цей фрагмент CSS працював для мене:

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

}

Для чистого CSS рішення:

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

Примітка: Ще не підтримується всіма постачальниками браузерів.

Довідка: приховати текст заповнювача на фокусі за допомогою CSS від 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 РІШЕННЯ: Робота в глобальному масштабі для всіх матеріалів, текстових областей із заповнювачем.

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

Демо тут: jsfiddle

Спробуйте це :

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

        });

}

для введення

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

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

Крім усього вищезазначеного, у мене є дві ідеї.

Ви можете додати елемент, що імітує доробку пальця. Потім за допомогою JavaScript керуйте елементом, який відображає та ховає.

Але він настільки складний, що інший використовує селектор братів css. Просто так:

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

23333, у мене погана англійська мова. Сподіваємося вирішити вашу проблему.

спробуйте цю функцію:

+ Він приховує фокус PlaceHolder і повертає його назад на розмиття

+ Ця функція залежить від селектора заповнення заповнення, спочатку вона вибирає елементи з атрибутом заповнювача, запускає функцію на фокусування, а іншу - на розмивання.

на фокусі: він додає атрибут "data-text" до елемента, який отримує своє значення з атрибута placeholder, а потім видаляє значення атрибута placeholder.

on blur: він повертає значення заповнення місця та видаляє його з атрибута data-text

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

Ви можете дуже добре стежити за мною, якщо подивіться, що відбувається поза кадром, оглянувши вхідний елемент

Те саме, що я застосував у кутовій 5.

я створив нову рядок для зберігання заповнювача

newPlaceholder:string;

то я використовував функції фокусування та розмиття на вхідному полі (я використовую основне автозаповнення).

Вище заповнювач заповнюється з typecript

Дві функції, які я використовую -

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

Не потрібно використовувати будь-який CSS або JQuery. Це можна зробити прямо з тегу введення HTML.

Наприклад , у поле нижче електронної пошти текст заповнювача зникне після клацання всередині, а текст з’явиться знову, якщо натиснути зовні.

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