最佳答案
我觉得这样比较好
var state = true;
function hideText() {
var info = document.querySelector('#search').value;
if (state) {
document.querySelector('#text').style.visibility = "hidden";
state = false
} else if (!state && info == "") {
document.querySelector('#text').style.visibility = "visible";
state = true;
}
}
function clickText() {
document.querySelector('#search').focus()
}
document.querySelector('#search').addEventListener('focus', hideText);
document.querySelector('#search').addEventListener('blur', hideText);
document.querySelector('#text').addEventListener('click', clickText);
:root {
font-size: 10px;
--color-main: rgb(66, 157, 199);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 2rem;
}
#container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#wrapper {
position: relative;
}
#text {
position: absolute;
top: 1rem;
left: 1rem;
}
#search {
width: 50rem;
height: 5rem;
padding-left: 1rem;
border: 3px solid var(--color-main);
border-radius: 5px;
font-size: inherit;
font-family: inherit;
}
<div id="container">
<div id="wrapper">
<input id="search" name="busqueda" type="text">
<label for="busqueda" id="text"> <strong>Hello</strong> World!</label>
</div>
</div>
关于html - 如何在占位符属性中设置单个单词的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34144674/