点击input表单内的span文本时，作为placeholder的span标签无法上移

问题根源：你代码里的placeholder span是绝对定位在input上方的，点击span文本时，点击事件被span拦截，没传递给下方的input，导致input无法获取焦点，触发不了上移样式。

下面是两种可行的解决方法：

• 方法一：让span不拦截点击事件
  给span添加pointer-events: none; CSS属性，这样点击span时事件会穿透到下方的input，input就能正常聚焦并触发样式变化。修改后的CSS代码：

  .form-group span {
    position: absolute;
    top: 10px;
    left: 10px;
    pointer-events: none; /* 添加此行 */
    transition: all 0.3s ease;
  }
  

• 方法二：给span绑定点击事件手动聚焦input
  如果需要保留span的交互能力，可以给每个span添加点击事件，手动让对应的input获取焦点。JavaScript代码示例：

  document.querySelectorAll('.form-group span').forEach(span => {
    span.addEventListener('click', function() {
      this.nextElementSibling.focus();
    });
  });
  

两种方法任选其一即可解决问题，方法一更简洁，适合不需要span有交互的场景；方法二更灵活，适合需要span保留其他交互逻辑的情况。

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