时间戳

首页 > 解决方案 > 在javascript中设置输入元素的初始值不会传播到输出元素

javascript - 在javascript中设置输入元素的初始值不会传播到输出元素

问题描述

我有以下 HTML：

var mySlider = document.getElementById("mySlider");
var stored = localStorage.getItem("myData");
if (stored == null)
  mySlider.value = 5;
else
  mySlider.value = stored;
mySlider.addEventListener("change", () => {
  localStorage.setItem("myData", mySlider.value);
});
<form oninput="myNumber.value=mySlider.value">
  <input type="range" id="mySlider" min="0" max="10" />
  <output for="mySlider" id="myNumber">default</output>
</form>

数据进出存储和范围滑块的所有获取和设置似乎都工作正常；滑块加载到我之前设置的任何值。但是输出myNumber似乎只响应滑块的手动移动；它在初始化时显示其原始值“默认”而不是输入滑块的值，直到我实际开始移动滑块。

我知道我可以在设置滑块的值时继续设置输出的值，但这似乎违背了首先拥有输出元素的目的。输出是否不应该在更改时显示输入的结果，无论该更改来自javascript还是用户交互？我如何让它以这种方式表现？

标签： javascripthtmlinputoutput

解决方案

输出标签没有什么特别之处，它是表单的 oninput 执行实际设置，我已经测试过（您也可以测试）表单的 oninput 事件似乎没有在简单设置值时被调用手动输入（意思是，使用 javascript）。

如果您不想从字面上设置输出元素的值，则可以在更改任何元素的值之后立即调度表单的“输入”事件。假设您的表单的 id 为“u”，那么在设置子元素的值之后，只需调用：（全部一起）：

mySlider.value=5; u.dispatchEvent（新事件（“输入”））

推荐阅读