TransWikia.com

Как сделать не исчезающую подсказку при вводе текста в input?

Stack Overflow на русском Asked on January 23, 2021

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

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

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

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

2 Answers

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>

Correct answer by Sergei Kirjanov on January 23, 2021

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

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 можно поправить, сделав ее практически идеальной.

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

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

Answered by Vasily on January 23, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP