输出元素

昨晚我在一个特别大的代码库的地下室里四处搜寻，偶然发现了我们的 normalize.css，它确保我们所有的标记在不同的浏览器中以类似的方式呈现。我快速浏览了一下，发现了一些针对一个名为 <output> 的奇怪元素的样式，我以前从未见过或听说过。

根据 MDN 的说法，它“代表计算或用户操作的结果”，通常用于表单。让我感到尴尬的是，它并不是规范中新增的奇特元素，因为 Chris 在很久以前的 2011 年 的一篇博文中就使用过它。

但是无论如何！output 是做什么的？我们如何使用它呢？假设我们有一个类型为 range 的输入。然后我们添加一个 output 元素，并使用 for 属性将其与输入关联起来。

<input type="range" name="quantity" id="quantity" min="0" max="100">
<output for="quantity"></output>

查看 CodePen 上的 输入输出 #2 示例，由 CSS-Tricks (@css-tricks) 制作。

它...实际上什么也没做。默认情况下，output 没有任何样式，也不会在浏览器中渲染任何盒子。此外，当我们更改输入的值时，也不会发生任何事情。

我们必须使用 JavaScript 将所有内容连接在一起。没问题！首先我们需要在 DOM 中使用 JavaScript 找到我们的输入，如下所示

const rangeInput = document.querySelector('input');

现在我们可以向它添加一个事件监听器，以便无论何时我们编辑值（通过在我们的输入上左右滑动），我们都可以检测到更改

const rangeInput = document.querySelector('input');

rangeInput.addEventListener('change', function() {
  console.log(this.value);
});

this.value 将始终引用 rangeInput 的值，因为我们是在事件处理程序内部使用它的，然后我们可以将该值返回到控制台以确保一切正常。之后，我们可以在 DOM 中找到我们的 output 元素

const rangeInput = document.querySelector('input');
const output = document.querySelector('output');

rangeInput.addEventListener('change', function() {
  console.log(this.value);
});

然后，我们编辑事件监听器，以便每次编辑输入的值时，都会更改 output 的值

const rangeInput = document.querySelector('input');
const output = document.querySelector('output');

rangeInput.addEventListener('change', function() {
  output.value = this.value;
});

瞧！我们有了它，或者说几乎有了。现在，当你更改输入的值时，我们的输出将反映出来。

查看 CodePen 上的 输入输出 #3 示例，由 Robin Rendle (@robinrendle) 制作。

我们可能应该通过为输出设置默认值来稍微改进一下，这样它就可以在你加载页面时立即显示。我们可以使用 HTML 本身在输出中设置值

<output for="quantity">50</output>

但我认为这不是特别稳健。当我们想更改输入的最小值或最大值时会发生什么？我们也必须始终更改我们的输出。让我们在脚本中设置输出的状态。这是一个名为 setDefaultState 的新函数

function setDefaultState() {
  output.value = rangeInput.value;
}

当 DOM 加载完毕后，执行该函数

document.addEventListener('DOMContentLoaded', function(){
  setDefaultState();
});

查看 CodePen 上的 输入输出 #4 示例，由 Robin Rendle (@robinrendle) 制作。

现在我们可以对所有内容进行样式设置！但还有一件事。事件监听器 change 很好，但它不会在您左右滑动时立即更新文本。幸运的是，有一个名为 input 的新事件监听器类型，它具有 相当不错的浏览器支持，我们可以用它来代替。以下是我们添加了这个功能后的所有代码

const rangeInput = document.querySelector('input');
const output = document.querySelector('output');

function setDefaultState() {
  output.value = rangeInput.value;
}

rangeInput.addEventListener('input', function() {
  output.value = this.value;
});

document.addEventListener('DOMContentLoaded', function() {
  setDefaultState();
});

查看 CodePen 上的 输入输出 #5 示例，由 Robin Rendle (@robinrendle) 制作。

我们有了它！一个带有输出的输入。