6

Есть input, есть placeholder.

Смодулируем ситуацию, что есть какой-то текст для placeholder, допустим "Hamburger".

Когда я ввожу текст, по моей задумке, человек должен вводить текст Hamburger, но как подсказкой, как правильно писать, placeholder не должен исчезать при вводе.

То есть, мне нужно, что когда я ввожу текст, placeholder не исчезал, либо использовать другую для этого предназначенную функцию, если она конечно существует.

Vasily
  • 11,547
Hlib Ilnytsky
  • 331

2 Answers2

1

Для того что бы это реализовать можно сделать так:

div {
  position: relative;
  height: 18px;
}

input, span {
  position: absolute;
  top: 50%;
  font-size: 16px;
  background-color: transparent;
  transform: translateY(-50%)
}


span {
  color: #ccc;
  padding-left: 4px;
}
<div>
  <span>Hamburger</span>
  <input />
</div>

Центровку текста относительно input'a можно поправить, сделав ее практически идеальной.

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

Постоянно отображать маску при вводе номера телефона

Vasily
  • 11,547
  • Спасибо за данный ответ. Но мне нужно, чтобы во время заполнения, текст "placeholder" исчезал, то есть, допустим ввёл я букву H, мне нужно чтобы и в placeholder она пропала – Hlib Ilnytsky Aug 20 '20 at 22:26
  • @ГлебЧерных я обновил ответ – Vasily Aug 21 '20 at 09:13
  • Оно там тоже не пропадает – Hlib Ilnytsky Aug 21 '20 at 16:11
  • @ГлебЧерных там реализовано все за исключением фактического исчезновение , поскольку это завязано с валидацией. Оттолкнитесь от этой идеи и сделайте то что Вам требуется. – Vasily Aug 21 '20 at 17:20
  • Скажу проще, мне нужно чтобы было так, как при вводе текста в поисковике браузера, допустим гугла. – Hlib Ilnytsky Aug 21 '20 at 20:03
0

input прозрачный, а под ним другой с "placeholder"-ом:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title> placeholder </title>
<style>
div.InputWithPlaceholder {
    position: "relative"
}
div.InputWithPlaceholder > input.Placeholder {
    position: absolute;
    background-color: white;
    color: #DDDDDD;
}
div.InputWithPlaceholder > input.Value {
    position: absolute;
    background-color: transparent;
}
</style>
</head>
<body>
<div class="container"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script>
"use strict"

const { useEffect, useState }  = React
const e = React.createElement


const InputWithPlaceholder = ({value,onChange,placeholder}) => (
    e("div",{ className: "InputWithPlaceholder" },
        e("input",{ key: "placeholder", value: placeholder, onChange: ev=>{}, className: "Placeholder" }),
        e("input",{ key: "value", value, onChange, className: "Value" }),
    )
)


const App = () => {
    const [ value, setValue ] = useState("")
    const defPlaceholder = "Hamburg"
    const placeholder = defPlaceholder.includes(value) ? defPlaceholder : ""
    return e(InputWithPlaceholder, { value, onChange: ev=>setValue(ev.target.value), placeholder })
}


ReactDOM.render(e(App), document.querySelector('.container'))


</script>
</body>
</html>
Sergei Kirjanov
  • 4,015