Как автоматически скрыть заполнитель текста при фокусе, используя CSS или JQuery?


213

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

Я предполагаю, что должен специально предназначаться для Chrome .

Какие-либо решения?

Если не с CSS , то с jQuery ?

С уважением.


Тогда, пожалуйста, отредактируйте мой текст - это может помочь
Тони Мишель Каубе,

Opera также является еще одним браузером, который удаляет заполнитель в фокусе.
Лукас

Firefox начиная с версии 15 больше не удаляет текст-заполнитель, пока вы не начнете печатать. Я верю, что то же самое может быть в случае с IE10, но у меня нет способа это проверить.
Роб Флетчер

1
Я обеспокоен тем, что никто не упомянул тот факт, что вы не должны беспокоиться об изменении поведения браузера. Я, например, предпочитаю, чтобы заполнитель оставался на месте. Это просто помогает мне как конечному пользователю, и это функция, которую браузеры сейчас начинают реализовывать ... вероятно, потому что поведение исчезновения в фокусе оказалось проблемой юзабилити. Пусть браузер будет, пожалуйста.
Райан Уил

«Это делается автоматически для каждого браузера, кроме Chrome». Уже нет? Я только что попробовал это на OSX в Firefox 37.0.2, Safari 7.1.5 и Chrome 42.0. Ни один из них не удаляет текст-заполнитель, пока я не начну печатать, и все они вернут его, когда я очищу поле.
Натан Лонг,

Ответы:


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

2
Это заставляет его идти, но когда я щелкаю прочь от поля, оно остается пустым.
LondonGuy

2
@LondonGuy: Только что отредактировал мой пост, посмотри, работает ли он так, как ты хотел. Но решение Тони Мишеля Каубе лучше
MatuDuke

9
Проблема здесь в том, что это навязчивый JavaScript. Решение Тони Мишеля Каубе лучше.
Silkster

Мне это нравится, но, к сожалению, не работает ни IE, ни Safari.
Мухаммед Мустафа,


456

Изменить: все браузеры поддерживают сейчас

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

1
Отличный ответ! Я не вижу большого смысла отказываться от своего старого решения jQuery в пользу HTML5, а затем идти дальше и снова добавить JavaScript в качестве исправления. Это просто решение, которое я искал.
nienn

@ MartinHunt вы пробовали это на FF? вход: focus :: - moz-placeholder
Филипп

16
Извините за углубление старого потока, но только для того, чтобы сделать его более полным: input: focus: -moz-placeholder для Firefox 18 и ниже, для 19 лет вам нужно использовать: input: focus :: - moz-placeholder (note двойное двоеточие). Ссылка: css-tricks.com/snippets/css/style-placeholder-text
Питер Льюис,

этот комментарий является победой. работает с динамическими элементами управления, как кендо тоже
reflog

1
Отличный ответ и от меня! Для тех из нас, кому также может потребоваться эта функция, когда поле отключено, вот код CSS: / * Скрытие текста-заполнителя (если есть), когда поле хранения отключено * / input: disabled :: - webkit-input- заполнитель {цвет: прозрачный; } ввод: отключен: -moz-placeholder {цвет: прозрачный; } input: disabled :: - moz-placeholder {цвет: прозрачный; } input: disabled: -ms-input-placeholder {цвет: прозрачный; }
Раманагом

74

Вот CSS-решение (пока работает только в WebKit):

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

1
Мне нравится этот ответ, но поддержка браузера для этого просто еще нет.
Джерри

44

Чистое решение 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 */

Изменить: Обновлено для поддержки современных браузеров.


6
Лучшее решение CSS!
Фатих САРИ

Старый добрый CSS ... отличное простое решение! Почему я не подумал об этом ??
JI-Web

40

Вы пробовали заполнить attr?

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

-РЕДАКТИРОВАТЬ-

Я вижу, попробуйте это тогда:

$(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/

-РЕДАКТИРОВАТЬ-

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

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/


Приятно видеть используемый атрибут данных. Но я бы посмотрел на CSS-эквивалент. При кэшировании это будет более быстрое решение и может быть глобальным. Выше необходимо, чтобы атрибут data был помещен в каждый необходимый элемент. (ответ ниже)
Нил

1
Это слишком сложно. Может быть сделано с гораздо меньшим количеством кода.
Джаллардо

@JGallardo покажи мне свет (но я не уверен, видел ли ты, что есть 3 разных решения)
Тони Мишель Коубет

19

Чтобы усилить ответ @ 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; }

Именно то, что я написал сейчас (вместо этого я использовал opacity:0;)! Единственное CSS-решение в этой теме со всеми возможными браузерами!
РейнекеВосз

11

Ответ Тони хорош, но я бы предпочел отбросить 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'));
    });
})

Demo.


3
Это не работает, если у вас есть более одного поля. Вот расширенная версия вашего кода jsfiddle.net/6CzRq/64
svlada

10

Мне нравится упаковывать это в пространство имен и запускать элементы с атрибутом "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'));
        });
    });
};

5

Иногда вам нужна СПЕЦИФИЧНОСТЬ, чтобы убедиться, что ваши стили применяются с наибольшей idсилой. Спасибо за @Rob Fletcher за отличный ответ, в нашей компании мы использовали

Поэтому, пожалуйста, рассмотрите возможность добавления стилей с префиксом id контейнера приложения.

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


5

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

4

Для дальнейшего уточнения примера кода Уоллеса Сидре :

$(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 .


4

Мне нравится подход css, приправленный переходами. На Focus заполнитель исчезает;) Работает также для текстовых полей.

Спасибо @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;
}

4

Используя SCSS вместе с http://bourbon.io/ , это простое, элегантное решение работает во всех веб-браузерах:

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

Используйте Бурбон! Это хорошо для тебя !


3

Этот кусок CSS работал для меня:

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

}

1
Это хороший способ сделать это без JQuery :)
tehX

3

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

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

Примечание. Пока не поддерживается всеми поставщиками браузеров.

Ссылка: Скрыть текст местозаполнения в фокусе с помощью CSS от Ильи Райскина.


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

1
Это предполагает только один вход.
Ним,

2

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

1

Демо здесь: 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 [placeholder]"), чтобы выбрать только те поля, которые имеют атрибут placeholder.
Silkster

Это лучший ответ, простой и
отменяет

1

для ввода

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

для текстовой области

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

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

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

0

Помимо всего вышесказанного, у меня есть две идеи.

Вы можете добавить элемент, имитирующий держатель поля. Затем с помощью 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, у меня плохой английский. Надеюсь решить вашу проблему.


Пожалуйста, проверьте этот URL, это будет полезно для повышения качества вашего контента;
Вилли Ченг

0

попробуйте эту функцию:

+ Он скрывает PlaceHolder в фокусе и возвращает его обратно на Blur

+ Эта функция зависит от селектора-заполнителя, сначала она выбирает элементы с атрибутом-заполнителем, запускает функцию фокусировки, а другую - размытие.

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

на размытие: возвращает значение заполнителя и удаляет его из атрибута 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', '');
  });
});

Вы можете очень хорошо следовать за мной, если вы посмотрите, что происходит за кадром, осмотрев элемент ввода


0

То же самое я применил в угловых 5.

я создал новую строку для хранения заполнителя

newPlaceholder:string;

Затем я использовал фокус и размытие в поле ввода (я использую простое автозаполнение).

Выше заполнитель устанавливается из машинописи

Две функции, которые я использую -

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

0

Нет необходимости использовать любой CSS или JQuery. Вы можете сделать это прямо из тега ввода HTML.

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

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

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

Этот ответ идентичен предыдущему ответу. Если у вас есть что добавить или улучшить, предложите изменить исходный ответ.
Джонатан
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.