如何阻止占位符转换回来？ (CSS)
Posted
技术标签:
【中文标题】如何阻止占位符转换回来？ (CSS)【英文标题】：How to stop placeholder from transitioning back ? (CSS) 【发布时间】：2021-06-14 10:59:02 【问题描述】：我试图创建一个对占位符有过渡效果的输入字段，为此我使用<span> 标记来保存占位符并使用:focus CSS 选择器对其进行过渡
它工作得很好，但问题是在我们输入文本并单击输入区域/文本字段区域之外的任意位置后，占位符转换回来并与输入的文本重叠。
如果文本区域当前包含文本，我希望占位符不转换回来。
此外，还有一个问题是，如果单击占位符，则不会选择文本字段。
我怎样才能清除这些错误？
我提供了以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Input</title>
<style>
body
margin: 0px;
#top-heading
padding: 1rem;
text-align: center;
margin: auto;
margin-bottom: 1rem;
textarea
width: 85%;
display: block;
height: 10vh;
margin: 1.5rem;
margin-top: 0rem;
padding: 0.5rem;
font-size: large;
span
position: absolute;
top: 6rem;
padding-left: 2.7rem;
color: rgb(121, 120, 120);
font-size: larger;
textarea:focus~span
color: black;
font-size: 1.091rem;
transition: .6s ease;
transform: translate3d(-1.15rem, -1.9rem, 2rem);
</style>
</head>
<body>
<h1 id="top-heading">Input</h1>
<textarea id="txt-input"></textarea>
<span>Enter the input</span>
</body>
</html>【问题讨论】：
我怀疑这可以用纯 CSS 完成。还使用label 而不是span 使用for 属性将标签与表单元素相关联
是的，进行您建议的更改可以清除我提到的第二个问题，谢谢您的帮助，
@JonP 现在，谈到过渡部分，如果不使用 CSS，那么添加 javascript 是否可以按照我提到的方式工作？
【参考方案1】：
你能检查下面的代码吗？希望它对你有用。您需要将transition: .6s ease; 属性赋予span 标签而不是textarea:focus~span。
请参考此链接：https://jsfiddle.net/yudizsolutions/kjfc0z37/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Input</title>
<style>
body
margin: 0px;
#top-heading
padding: 1rem;
text-align: center;
margin: auto;
margin-bottom: 1rem;
textarea
width: 85%;
display: block;
height: 10vh;
margin: 1.5rem;
margin-top: 0rem;
padding: 0.5rem;
font-size: large;
span
position: absolute;
top: 6rem;
padding-left: 2.7rem;
color: rgb(121, 120, 120);
font-size: larger;
transition: .6s ease;
textarea:focus~span
color: black;
font-size: 1.091rem;
transform: translate3d(-1.15rem, -1.9rem, 2rem);
</style>
</head>
<body>
<h1 id="top-heading">Input</h1>
<textarea id="txt-input"></textarea>
<span>Enter the input</span>
</body>
</html>【讨论】：
谢谢@Yudiz Solutions，虽然这并不能解决我提到的问题，但我很想知道在跨度标记和文本字段中添加过渡之间的区别：focus~span。跨度>以上是关于如何阻止占位符转换回来？ (CSS)的主要内容，如果未能解决你的问题，请参考以下文章