event.target是否具备唯一位置属性？无需自定义data-*属性即可定位元素

当然有啦！你完全可以利用DOM元素的层级关系来精准定位对应的标签，根本不需要额外添加data-position这类自定义属性。你的HTML结构已经给出了天然的关联——每个.inputStyle输入框和对应的.inputLabel标签都包裹在同一个.inputContainer父元素里，这就是最靠谱的定位依据～

核心思路 #

放弃通过索引匹配的方式，转而通过event.target（当前触发事件的输入框）找到它的父容器，再从父容器里直接获取对应的标签元素。这样不管你后续新增/删除输入框，代码都不需要调整，比维护索引要健壮得多。

修改后的完整代码 #

JavaScript #

'use strict';
// 先一次性获取所有输入框，避免重复查询DOM
const inputElements = document.querySelectorAll('.inputStyle');

inputElements.forEach(input => {
  input.addEventListener('focus', labelShrink);
  input.addEventListener('blur', labelGrow);
});

function labelShrink(event) {
  // 找到当前输入框的父容器，再获取里面的标签
  const label = event.target.closest('.inputContainer').querySelector('.inputLabel');
  label.style.fontSize = ".75rem";
}

function labelGrow(event) {
  const input = event.target;
  const label = input.closest('.inputContainer').querySelector('.inputLabel');
  // 只有输入框为空时才恢复标签大小
  if (!input.value.trim()) {
    label.style.fontSize = "1.5rem";
  }
}

CSS #

.inputLabel {
  position: absolute;
  z-index: -1;
  padding: .25rem 0 0 .25rem;
  font-size: 1.5rem;
  color: rgb(64, 64, 64);
  user-select: none;
  transition: font-size .25s;
}
.inputStyle {
  padding-top: 1rem;
  font-size: 2rem;
  font-family: arial;
  background-color: transparent;
}
.inputContainer {
  /* 给父容器加相对定位，让绝对定位的标签相对于它定位（可选但更合理） */
  position: relative;
}

HTML #

<form class="formStyle">
  <div class="inputContainer">
    <div class="inputLabel">Phone Number</div>
    <input type="text" name="phoneOne" class="inputStyle">
  </div>
  <br>
  <div class="inputContainer">
    <div class="inputLabel">Secondary Phone Number</div>
    <input type="text" name="phoneTwo" class="inputStyle">
  </div>
  <input type="submit" value="Submit">
</form>

额外优化点 #

1. 缓存了inputElements，避免每次循环都调用document.querySelectorAll，提升性能；
2. 给.inputContainer加了position: relative，让绝对定位的标签不会相对于整个页面乱跑，布局更合理；
3. 使用trim()判断输入框内容，避免用户输入空格导致标签不恢复的问题。

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