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.