如何在反应中启用浮动输入字段的占位符？

Question

bootstrap 基于浮动输入占位符值无法更改。想要显示一些文本作为默认文本，如占位符 & 应该启用 placeholder/value 区域可编辑。请帮助

https://codesandbox.io/s/floating-input-placeholder-zvzmq0

<div class="form-floating mb-3 ">
        <input
          type="text"
          class="form-control  "
          id="floatingInput"
          placeholder="Enter text here …"
          value={"Enter text here …"}
        />
        <label for="floatingInput">Email address</label>
      </div>

Answer 1

当使用浮动标签时，它不打算显示占位符。

当没有提供任何值时，标签将显示在输入的中间并覆盖通常显示占位符的 space。当在输入的上角和下方提供标签 floats 时，您可以看到指定的值。

从技术上讲，您需要提供占位符值，但未显示：

A placeholder is required on each <Form.Control> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element.

https://react-bootstrap.netlify.app/forms/floating-labels/

这是一个带有浮动标签和可变值的工作codesanbox： https://codesandbox.io/s/floating-input-placeholder-forked-3tvf50

如何在反应中启用浮动输入字段的占位符？

How to enable Placeholder for Floating Input Field in react?

html

reactjs

react-bootstrap

bootstrap-5