我可以在输入占位符内放一个<span>吗？

如何解决我可以在输入占位符内放一个<span>吗？

我正在做一个有这样输入的项目：

safe_json_encode($tweet_arr);

当该网站位于台式机上时，我希望拥有整个较长的占位符，但在移动设备中时，我想要占位符只说 <div className="search__bar__description form__control"> <input placeholder="Filter by title,companies,expertise..." aria-label="Enter company,title,or expertise here" onChange={e => setSearchInput(e.target.value)} value={searchInput} /> </div>

我试图弄清楚CSS是怎么做到的。我可以将跨度放在占位符内部然后将其隐藏吗？那将是有效的HTML吗？如果不是W3C有效的HTML，您能告诉我该怎么做吗？

谢谢！

解决方法

首先，您不需要JavaScript即可执行此操作。尽管您不能将span放在input内，但是您可以使用:placeholder-shown伪类执行一些技巧，以实现所追求的目标。在撰写本文时，浏览器对此伪类的支持为really good。

来自MDN：

:placeholder-shown CSS伪类表示任何<input>或 当前显示占位符文本的<textarea>元素。

此示例使输入的占位符颜色在较小的屏幕上透明，并在视觉上将其隐藏。然后，在此断点处显示包含短标签的span。请注意，它的样式和位置使其看起来尽可能接近原始占位符文本。最后，使用上述伪类，当原始占位符显示为 时（输入不为空白时），我们将隐藏短标签。

.form__control {
  position: relative;
}

.short-label {
  display: none;
  pointer-events: none;  
}

@media screen and (max-width: 700px) {
   ::placeholder {
    color: transparent;
  }

  .short-label {
    position: absolute;
    left: 4px;
    top: calc(50% + 1px);
    transform: translateY(-50%);
    font-size: 11px;
    color: rgb(43%,43%,43%);
    font-family: sans-serif;
    letter-spacing: 0.4px;
    display: block;
    font-weight: lighter;
  }

  input:not(:placeholder-shown)+.short-label {
    display: none;
  }
}

<div class="search__bar__description form__control">
  <input placeholder="Filter by title,companies,expertise..." aria-label="Enter company,title,or expertise here" />
  <span class="short-label">Filter by title...</span>
</div>

jsFiddle

,

您不能在占位符内放置跨度。

要实现的目标的常见解决方案是将占位符文本作为单独的元素放置在文本字段后面。然后，您可以进行所需的任何标记和样式。当然，这是更多的工作，但这是定制工程的方法。

您可以在此处看到一个高级示例：https://css-tricks.com/float-labels-css/

如果您忽略动画，那么从他的代码示例中可以得出的结论是，使用<label>元素代替了占位符属性，并且该元素位于输入字段的后面，因此看起来相同，但是可以与所有其他标准元素一样使用所有相同的CSS（在他的情况下，添加一些奇特的过渡）和子元素进行操作。