Ruby on Rails项目实现输入框激活时左上角浮动标签求助

1. 统一Simple Form的Wrapper结构 #

先确保所有输入项使用一致的wrapper，方便CSS统一控制。在config/initializers/simple_form.rb里定义浮动标签专用wrapper：

config.wrappers :floating_label, tag: 'div', class: 'floating-label-group', error_class: 'has-error' do |b|
  b.use :html5
  b.use :placeholder
  b.use :label, class: 'floating-label'
  b.use :input, class: 'floating-input'
  b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
end

修改表单代码，统一使用这个wrapper（注意补充标签文本）：

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

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

= f.input :phone,
        required: true,
        wrapper: :floating_label,
        label: t('users.form.labels.phone')

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

2. 添加CSS核心样式 #

在项目的SCSS/CSS文件中添加以下样式，实现浮动效果：

/* 浮动标签容器 */
.floating-label-group {
  position: relative;
  margin-bottom: 1.5rem;
}

/* 输入框基础样式 */
.floating-input {
  width: 100%;
  padding: 0.75rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  background-color: transparent;
  outline: none;
  transition: border-color 0.3s ease;
}

.floating-input:focus {
  border-color: #007bff; /* 聚焦时边框颜色，可自定义 */
}

/* 浮动标签初始状态 */
.floating-label {
  position: absolute;
  top: 0.75rem;
  left: 0.5rem;
  color: #666;
  font-size: 1rem;
  pointer-events: none;
  transition: all 0.3s ease;
  background-color: #fff; /* 覆盖输入框边框，避免标签重叠 */
  padding: 0 0.25rem;
}

/* 输入框有内容或聚焦时，标签上浮 */
.floating-input:focus + .floating-label,
.floating-input:not(:placeholder-shown) + .floating-label {
  top: -0.5rem;
  left: 0.5rem;
  font-size: 0.8rem;
  color: #007bff; /* 上浮后标签颜色，可自定义 */
}

3. 处理编辑页面已有值的输入框 #

如果是编辑页面，输入框默认有值，需要让标签保持上浮状态。添加一段JS（可放在app/assets/javascripts/forms.js）：

document.addEventListener('DOMContentLoaded', function() {
  const floatingInputs = document.querySelectorAll('.floating-input');
  
  // 页面加载时检查已有值的输入框
  floatingInputs.forEach(input => {
    if (input.value.trim() !== '') {
      input.classList.add('has-value');
    }
  });

  // 输入内容变化时更新状态
  floatingInputs.forEach(input => {
    input.addEventListener('input', function() {
      this.classList.toggle('has-value', this.value.trim() !== '');
    });
  });
});

注：如果保留了placeholder属性，floating-input:not(:placeholder-shown)会自动检测内容，这步JS可省略；若需兼容旧浏览器或无placeholder场景，保留JS更稳妥。

4. 兼容性说明 #

• :not(:placeholder-shown)伪类支持Chrome 47+、Firefox 51+、Safari 10.1+、Edge 15+；需兼容旧版浏览器时，优先用JS添加类的方式控制。
• 过渡动画transition保证标签移动平滑，提升体验。

内容的提问来源于stack exchange，提问作者user24450350