活动时输入字段左上角的浮动标签

Question

所以我有一个现有的 Ruby on Rails 项目，如下所示

      = f.input :p_number,
              required: true,
              autocomplete: false,
              placeholder: t('users.form.placeholders.p_number')

      = f.input :email,
              required: true,
              as: :email,
              :wrapper => :input_wrapper,
              label: t('simple_form.labels.user.email')

      = f.input :phone,
              required: true,
              :wrapper => :input_wrapper

      = f.submit t(".submit"), class: "button primary small-expanded", id: "submit"

我希望在插入文本时将标签放置在输入字段的左上角。 这里有人可以帮忙吗？ 我将非常感激:)

它应该看起来像这样

我尝试在codepen中实现这个，但它仍然不起作用。

Answer 1

Hej，试试这个。我已经渲染了 HTML 以显示片段

window.addEventListener('DOMContentLoaded', () => {
  const formId = document.getElementById('formID')
  formID.addEventListener('input', (e) => {
    const tgt = e.target;
    tgt.classList.toggle('filled', tgt.value.trim() !== '')
  });
});

.form-input {
    position: relative;
    margin-bottom: 20px;
  }
  .form-input input {
    width: 100%;
    padding: 12px 8px 8px 8px;
    border: 1px solid #ccc;
    border-radius: 15px;
    font-size: 16px;
  }
  .form-input label {
    position: absolute;
    left: 10px;
    top: 18px;
    color: #999;
    transition: all 0.3s ease;
    pointer-events: none;
    font-size: 16px;
  }
  .form-input input:focus + label,
  .form-input input:not(:placeholder-shown) + label {
    top: 2px;
    font-size: 12px;
    color: #333;
  }
  button {
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

<form id="formID">
  <div class="form-input">
    <input type="text" id="p_number" name="p_number" required placeholder=" ">
    <label for="p_number">Personal Number</label>
  </div>
  <div class="form-input">
    <input type="email" id="email" name="email" required placeholder=" ">
    <label for="email">Email</label>
  </div>
  <div class="form-input">
    <input type="tel" id="phone" name="phone" required placeholder=" ">
    <label for="phone">Phone</label>
  </div>
  <button type="submit">Submit</button>
</form>

这是红宝石的变化

= simple_form_for @user do |f|
  .form-input
    = f.input :p_number, required: true, placeholder: false, input_html: { required: "required" }
    %label{ for: "user_p_number" }= t('users.form.placeholders.p_number')

  .form-input
    = f.input :email, required: true, as: :email, placeholder: false, wrapper: :input_wrapper, input_html: { required: "required" }
    %label{ for: "user_email" }= t('simple_form.labels.user.email')

  .form-input
    = f.input :phone, required: true, wrapper: :input_wrapper, placeholder: false, input_html: { required: "required" }
    %label{ for: "user_phone" }

  = f.submit t(".submit"), class: "button primary small-expanded", id: "submit"