HTML - Держите местозаполнитель, когда пользователь вводит

У меня есть такой ввод:

Когда я печатаю что-то на входе, текст заполнителя исчезает, что совершенно очевидно.

Теперь, что я хочу сделать, так это то, что я хочу, чтобы текст заполнителя оставался, когда пользователь вводит текст, чтобы вы могли видеть текст заполнителя в качестве фонового текста за исходным текстом:

EDIT: Я также хочу иметь возможность изменять фоновый текст с помощью JavaScript.

3 ответа

Трудно думать о хорошем использовании для такого поведения, поскольку оно блокирует некоторых пользователей.

Простым способом было бы использовать input::after, но это не поддерживается ни одним браузером прямо сейчас (спасибо @JukkaK.Korpela).

Но вы можете использовать элемент оболочки и атрибут данных, как показано ниже:

<div data-placeholder="my placeholder">
  
</div>

С помощью этого css:

.placeholder
{
 position: relative;
}
.placeholder::after
{
 position: absolute;
 left: 5px;
 top: 3px;
 content: attr(data-placeholder);
 pointer-events: none;
 opacity: 0.6;
}

В результате:

Нажмите здесь для демонстрации jsFiddle.

Поскольку вам нужно будет сделать много настроек, чтобы это выглядело хорошо, вы можете также рассмотреть возможность использования элемента wrapping

в качестве входа "похожий":
<div data-placeholder="my placeholder">
 
</div>

CSS

.editable
{
 position: relative;
 border: 1px solid gray;
 padding: 3px;
 background-color: white;
 box-shadow: rgba(0,0,0,0.4) 2px 2px 2px inset;
}
.editable > input
{
 position: relative;
 z-index: 1;
 border: none;
 background-color: transparent;
 box-shadow: none;
 width: 100%;
}
.editable::after
{
 position: absolute;
 left: 4px;
 top: 5px;
 content: attr(data-placeholder);
 pointer-events: none;
 opacity: 0.5;
 z-index: 1;
}

Нажмите здесь для демонстрации 3. (с издевательством )

Нажмите здесь для демонстрации 2. (с поддержкой контента)


Значительно лучшее решение с эффектом облегчения благодаря CSS. Посмотрите: http://jsfiddle.net/csdtesting/wbqq129q/

  • Перед вводом:

  • При вводе:

Код:


Это можно сделать, используя обработчик "onchange". Вы напишете фантастическую функцию, которая будет содержать оставшуюся часть заполнителя на том, что пользователь набрал, и также поместил бы курсор в конец текста пользователя.

Вот несколько непроверенных, неполных js/psuedocode, чтобы дать вам идею:

userTextLength: 0, // measure of how many chars the user has typed; need this because the length itself won't be a valid measure, since we're modifying it in place. Note that we're using the DOM as a source of truth here... alternative method would be to store the user text itself here, but let run with this.
placeholder: "xx/yy/zz",
onchange: function() {
 boxText = document.querySelector('#elem').value;
 if (boxText.length === 1) { // special handling for the first character they type. (Using placeholder text at first.)
 this.userTextLength++;
 placeholder = boxText.slice(userTextLength);
 userText = boxText.slice(0, userTextLength);
 document.querySelector('#elem').innerHTML = userText + placeholder;
 }
 if (boxText.length < placeholder.length) { // this would mean they used backspace, which also needs to be handled.
 }
 else { // the normal case, should look quite similar to the first if block
 this.userTextLength += 1;
 userInput = 
 }
}

То, что я не обрабатывал здесь, - это фокусировка курсора. Для этого потребуется событие onfocus и будет использовать свойство userTextLength, чтобы решить, где его разместить. Для некоторой помощи в этом, этот ответ выглядит так, как будто это должно быть полезно.

licensed under cc by-sa 3.0 with attribution.