Stack Overflow на русском Asked on January 23, 2021
Есть input, есть placeholder.
Смодулируем ситуацию, что есть какой-то текст для placeholder, допустим "Hamburger".
Когда я ввожу текст, по моей задумке, человек должен вводить текст Hamburger, но как подсказкой, как правильно писать, placeholder не должен исчезать при вводе.
То есть, мне нужно, что когда я ввожу текст, placeholder не исчезал, либо использовать другую для этого предназначенную функцию, если она конечно существует.
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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP