如何阻止占位符转换回来？ (CSS)答案

【问题标题】：How to stop placeholder from transitioning back ? (CSS)如何阻止占位符转换回来？ (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 是否可以按照我提到的方式工作？

标签： html css debugging css-transitions placeholder

【解决方案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。跨度>