output元素

发布于 大漠

昨天晚上,我在一个特别大的代码库中四处游荡,偶然发现了我们平时使用的normalize.css文件用于重置HTML元素在不同浏览器中的样式。在这个过程中,我发现了一个名为<output>的特殊元素的样式,这是我以前从未见过的,甚至从未听说过的。

根据MDN上的相关描述,它代表计算或用户操作的结果,通常用于表单。让我感到尴尬的是,自从Chris在2011年在一篇文章中使用它之后,这并不是一个新的,花哨的附加功能。

先不管那么多!什么是output,我们又如何使用它?假设我们有一个rangeinput,然后我们添加一个output元素,并使用for将其与它的输入相关联。

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

正如你看到的一样,并没做任何事情。默认情况下,output没有任何样式,也不会在浏览器中呈现任何东西。同样的,当我们改变input的输入值时,也什么都没有发生。

我们必须把所有东西和JavaScript绑在一起。首先,需要使用JavaScript找到DOM中的input,比如:

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

现在我们可以将一个监听事件绑定到这个DOM元素上,这样的话,每当我们编辑该值时(通过向左或向右滑动),可以检测到change事件:

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

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

this.value总是指向inputrange的值,因为我们在事件处理程序中使用它,然后我们可以将这个值返回到控制台,以确保能正常工作。然后,可以在DOM中找到output元素:

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

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

然后我们编辑监听事件来设置output的值,这样一来,每当我们编辑input的值时,output的就会改变:

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

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

现在在看看效果!不管怎么说,现在有效果了。一旦你改变了input的值,output的值就会输出来:

我们应该通过给output设置一个默认值,以便在加载页面时output可以立即可见。我们可以使用HTML本身,给output设置值:

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

但我认为这并不是特别好的方案。当我们想要改变inputminmax的值时又会发生什么呢?我们也必须得改变我们的output。还是让JavaScript来设置output的状态,咱们通过一个新的函数setDefaultState来做这件事情:

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

当DOM完成加载,然后触发这个函数:

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

现在我们可以添加样式了。但还有一件事,当你向左或向右滑动时,事件监听器的变化非常大,但它不会立即更新输出的值。幸运的是,有一种新型的事件监听器,它被称为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();
});

这样我们就一个input和一个output

本文根据@ROBIN RENDLE的《The Output Element》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:https://css-tricks.com/the-output-element/

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:https://www.fedev.cn/html/the-output-element.htmlAir Max 95 - Fresh Mint