如何在JavaScript中实现输入框获焦时立即存储其初始值？

嘿，我看你想实现输入框一获得焦点就立刻存下当前值，而且得在用户修改内容前完成——这个需求很合理呀！你说用onfocus陷入了循环，不过看你贴的代码本身其实不会触发循环哦🤔 可能是后续有其他逻辑影响？先不管这个，咱们来把正确的实现捋清楚，保证完全满足你的需求。

核心思路 #

focus事件的触发时机刚好是输入框获得焦点、用户还没开始输入的瞬间，完美符合你“值改变前存储”的要求。我们只需要在这个事件里把当时的输入框值存起来就行，后续要用到的时候直接取这个存储的值就好。

推荐的实现代码 #

用事件监听的方式比直接写onfocus属性更灵活，也更容易维护：

<input type="text" value="someValue" id="myInput">

<script>
// 专门存聚焦时的初始值
let initialValue = '';
const inputBox = document.getElementById('myInput');

// 聚焦时存储初始值
inputBox.addEventListener('focus', function() {
  initialValue = this.value;
  console.log('已存储聚焦时的初始值：', initialValue);
});

// 可选：监听输入变化，随时对比初始值
inputBox.addEventListener('input', function() {
  console.log('当前输入值：', this.value);
  console.log('聚焦时的初始值：', initialValue);
});
</script>

关于你提到的循环问题 #

你当前贴的代码只是弹出输入框的值，本身不会导致循环。如果确实遇到了循环，建议排查这两个点：

• 是不是在storeVal函数里不小心修改了输入框的value？修改值可能会触发其他事件，间接导致聚焦重复触发
• 有没有其他事件监听器（比如input、change）里写了让输入框重新聚焦的逻辑？

另一种玩法：用自定义属性存值 #

如果你不想用全局变量，也可以把初始值存在输入框自己的自定义属性里，这样更“内聚”：

<input type="text" value="someValue" onfocus="this.dataset.focusedValue = this.value">

<script>
// 后续需要用的时候这么取
document.querySelector('input').addEventListener('input', function() {
  console.log('聚焦时的初始值：', this.dataset.focusedValue);
});
</script>

这样就能稳稳在用户开始输入前，把聚焦瞬间的输入框值存好啦。

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