一起来看 HTML 5.2 中新的原生元素

by admin on 2019年9月11日

一起来看 HTML 5.2 中新的原生元素 dialog

2018/01/20 · HTML5 ·
dialog

原文出处: Kirsty
TG   译文出处:Keith   

图片 1

不到一个月前,HTML 5.2 正式成为 W3C
的推荐标准(REC),其中,推出了一个新的原生模态对话框元素
,乍一看,可能感觉它就是一个新增的元素,然而,作者最近在玩的时候,发现它确实是一个值得期待和很有意思的元素,在这里分享给大家

这是 “ 最基础的示例

XHTML

<dialog open> Native dialog box! </dialog>

1
2
3
<dialog open>
    Native dialog box!
</dialog>

其中,open 属性表示此时 dialog 是可见的,如果没有 opendialog
将会隐藏,你可以使用 JavaScipt 将它显现出来,此时,dialog 渲染如下

图片 2

绝对定位 于页面之上,就如我们期望的一样,出现在内容的上方,并且
水平居中,默认情况下,它 和内容一样宽

对话框是web项目中用于用户交互的重要部分,我们最常见的就是js中
alert(),confirm(),但是这个对话框的不美观,也不能自定义样式,所以在开发的过程中,一般根据自己自己的需求造轮子或者使用第三方的。

原文地址:Meet the New Dialog
Element
作者:Keith

HTML5 拥有若干涉及表单的元素和属性。

<header>页眉;
<footer>页脚;
<nav>导航;
<article>文章;
<aside>附属信息;
<section>部分;
<hgroup>标题组;
<figure>包含图形、视频、代码示例、图像等<figcaption>为<figure>元素提供文本说明;
允许<a>元素包含块级元素;

基本操作

JavaScipt 有几个 方法属性 可以很方便地处理 dialog
元素,使用最多的可能还是 showModal()close()

const modal = document.querySelector(‘dialog’); // makes modal appear
(adds `open` attribute) modal.showModal(); // hides modal (removes
`open` attribute) modal.close();

1
2
3
4
5
6
7
const modal = document.querySelector(‘dialog’);
 
// makes modal appear (adds `open` attribute)
modal.showModal();
 
// hides modal (removes `open` attribute)
modal.close();

当你使用 showModal() 来打开 dialog 时,将会在 dialog
周围加一层阴影,阻止用户与 非 diglog 元素的交互,默认情况下,阴影是
完全透明 的,你可以使用 CSS 来修改它

Esc 可以关闭 dialog,你也可以提供一个按钮来触发 close()

还有一个方法是 show(),它也可以让 dialog 显现,但与 showModal()
不同的是它没有阴影,用户可以与非 dialog 元素进行交互

对话框的组成

常见的弹出框形式:

位置:屏幕的左上角,右上角,左下角,右下角,垂直居中等

大小:定宽定高,定宽不定高,不定宽不定高等

开发中的对话框形式就是位置和大小随机组合的一种情况。

但是有一种情况(不定宽高的垂直居中)不易实现(可以使用display:table或css3的translate或flex实现),具体可参考水平垂直居中布局

上面的对话框包含内容的容器,还有一个是对话框下面的遮罩层,遮罩层是用户触发弹出框后,形成的一个对话框与页面主体的分割图层,它的存在可以给用户一个更明显的视觉差效果,同时也起到避免用户触发对话框后的其他不必要的页面主体操作,从而产生更有的用户体验。

图片 3

本章介绍以下新的表单元素:

浏览器支持和 Polyfill

目前,只有 chrome 支持 “

`,Firefox需要在about:config里允许dom.dialog_element.enabled才能正常使用,我猜想,Firefox` 在不久的将来就会支持

图片 4

上图为 caniuse.com 关于 dialog
特性主流浏览器的兼容情况

幸运的是,我们可以使用
dialog-polyfill
来缓解这种尴尬,它既提供了 JavaScript
的行为,也包含了默认的样式,我们可以使用 npm 来安装它,也可以使用 `
标签来引用它。目前,它已支持各主流浏览器,包括
IE 9` 及其以上版本

只是,在使用它时,每个 dialog 需要使用下面语句进行初始化

dialogPolyfill.registerDialog(dialog);

1
dialogPolyfill.registerDialog(dialog);

并且,它并不会取代浏览器原生的行为

存在问题

虽然,有很多对话框的轮子供我们选择,但是我们面临着各种各样的问题。

  • 到底选择哪一种对话框(对于有选择综合症的人来说一个头疼的问题)
  • 可用性(api的简单与否,是否依赖了其他第三方的库)
  • 可扩展性
  • 浏览器的兼容性支持

那么,有没有一个简单的方法来做做一个对话框呢?当然有,我们可以使用HTML5的
dialog 元素。

不到一个月前,HTML 5.2 正式成为 W3C
的推荐标准(REC),其中,推出了一个新的原生模态对话框元素
<dialog>,乍一看,可能感觉它就是一个新增的元素,然而,作者最近在玩的时候,发现它确实是一个值得期待和很有意思的元素,在这里分享给大家

  • datalist
  • keygen
  • output

样式

打开和关闭模态框是最基本的,但这是肯定不够的,“

最开始时样式是不怎么好看的,因此,我们需要自定义它的样式,此外,我们可以通过设置伪元素
`::backdrop` 来优化

“ 显现时背影的样式

dialog { padding: 0; width: 478px; text-align: center; vertical-align:
middle; border-radius: 5px; border: 0; } dialog::backdrop {
background-color: rgba(0, 0, 0, 0.1); }

1
2
3
4
5
6
7
8
9
10
11
12
dialog {
    padding: 0;
    width: 478px;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    border: 0;
}
 
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.1);
}

为了兼容老的浏览器,使用 polyfill 时,::backdrop 是不起作用的,但
polyfill 会在 dialog 后面添加一个 .backdrop
元素,我们可以像下面这样定位它

dialog + .backdrop { background-color: rgba(0, 0, 0, 0.4); }

1
2
3
dialog + .backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

接下来,是时候向 bialog 里添加更多的内容,一般包括 headerbody
footer

XHTML

<dialog id=”sweet-modal”> <h3 class=”modal-header”>sweet
dialog</h3> <div class=”modal-body”> <p>This is a
sweet dialog, which is much better.</p> </div> <footer
class=”modal-footer”> <button id=”get-it”
type=”button”>Get</button> </footer> </dialog>

1
2
3
4
5
6
7
8
9
<dialog id="sweet-modal">
    <h3 class="modal-header">sweet dialog</h3>
    <div class="modal-body">
        <p>This is a sweet dialog, which is much better.</p>
    </div>
    <footer class="modal-footer">
        <button id="get-it" type="button">Get</button>
    </footer>
</dialog>

HTML5

<dialog open> <h2> Hello world.</h2></dialog>

很简单,我们使用上面的代码就可以做一个弹出内容为‘Hello world.’
的对话框。

控制对话框的显示/隐藏也很容易,添加 open
属性表示显示,去除为隐藏。当然,我们也可以通过DOM接口来控制 dialog
的显隐, close

对话框下面的遮罩层,我们可以使用 ::backgrop
伪元素,而它的激活,我们需要使用 showModal()
这个DOM的API,::backgrop 的特性是它的位置在dialog之下,在任何
z-index 之上。

使用 showModal() 不仅可以让遮罩层显示,dialog容器也显示,所以用到
::backdrop 的时候,可以用 showModal() 代替 show()
这个API;如果按键盘 ESC 键将关闭弹出层,当然你一可以使用 close()
这个DOM API。

我们可以设置 ::backdrop 这个图层为半透明图层,代码如下:

dialog::backdrop { background-color: rgba(0, 0, 0, 0.75);}

除了我们常见的提示信息的弹出层外,还有一类比较使用的是带表单的弹出层。

这是 <diglog> 最基础的示例

浏览器支持

datalist No No 9.5 No No
keygen No No 10.5 3.0 No
output No No 9.5 No No

最后,在添加一些 CSS,你就能得到你想要的

带表单的弹出层

我们可以使用HTML5的dialog元素结合form元素来做这些弹出层吗?

答:可以

我们怎么做才能让form元素和dialog元素紧密的结合起来呢?

答:我们只需要在dialog元素中添加 method="dialog"
这个属性即可,这样就可以将button元素的属性 value
的值传递给dialog元素。

<dialog> <form method="dialog"> <p>确定 or 取消</p> <button type="submit" value="yes">确定</button> <button type="submit" value="no">取消</button> </form></dialog><script> var dialog = document.querySelector dialog.showModal() dialog.addEventListener('close', function { console.log(dialog.returnValue) })</script>

demo

<dialog open>
    Native dialog box!
</dialog>

datalist 元素

datalist 元素规定输入域的选项列表。

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的
id:

进阶操作

通常,我们期望能从 dialog 中获取一些用户的信息。关闭 dialog
时,我们可以给 close() 传递一个 string,然后通过 dialog 元素的
returnValue 属性来获取

modal.close(‘Accepted’); console.log(modal.returnValue); // logs
`Accepted`

1
2
3
modal.close(‘Accepted’);
 
console.log(modal.returnValue); // logs `Accepted`

当然,还存在额外的事件我们可以监听,其中,最常用的可能是 close(关闭
dialog 时触发),还有 cancel (用户按 Esc 关闭 dialog 时触发)

此外,我们可能还期望点击 dialog
旁边的阴影来关闭,当然,这也是有解决办法的。点击阴影会触发 dialog
的点击事件,如果 dialog 的子元素占满了整个
dialog,那么我们可以通过监听 dialog 的点击,当 targetmodal
时来关闭它

modal.addEventListener(‘click’, (event) => { if (event.target ===
modal) { modal.close(‘cancelled’); } });

1
2
3
4
5
modal.addEventListener(‘click’, (event) => {
    if (event.target === modal) {
        modal.close(‘cancelled’);
    }
});

当然,这不是完美的,但它确实是有效的,如果你有更好的方式,欢迎在评论中交流

浏览器兼容性

虽然,这是一个比较好用的HTML5,但是还存在兼容性问题,chrome和opera支持的比较好,Firefox中是实验特性,但是IE,Edge,
safari支持的不好,ios不支持,Android也支持的不够好,只有Android6以后支持。具体可参考caniuse

那么,能不能让旧版本的浏览器支持HTML5的dialog呢?首先,我们想到的是有没有一个支持dialog的polyfill,就像支持es6新特性的babel-polyfill一样,确实有这样一个开源项目a11y-dialog,它分别提供了vue和react的不同版本。

更多系列文章请关注我的github

其中,open 属性表示此时 dialog 是可见的,如果没有 opendialog
将会隐藏,你可以使用 JavaScipt 将它显现出来,此时,dialog 渲染如下

实例

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

亲自试一试

提示:option 元素永远都要设置 value 属性。

总结

说了这么多,不如自己实际演练一番,作者也做了一个
demo,欢迎参考

1 赞 2 收藏
评论

图片 5

图片 6

keygen 元素

keygen 元素的作用是提供一种验证用户的可靠方法。

keygen 元素是密钥对生成器(key-pair
generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。

私钥(private key)存储于客户端,公钥(public
key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client
certificate)。

目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

绝对定位 于页面之上,就如我们期望的一样,出现在内容的上方,并且
水平居中,默认情况下,它 和内容一样宽

实例

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

亲自试一试

基本操作

JavaScipt 有几个 方法属性 可以很方便地处理 dialog
元素,使用最多的可能还是 showModal()close()

const modal = document.querySelector('dialog');

// makes modal appear (adds `open` attribute)
modal.showModal();

// hides modal (removes `open` attribute)
modal.close();

当你使用 showModal() 来打开 dialog 时,将会在 dialog
周围加一层阴影,阻止用户与 非 diglog 元素的交互,默认情况下,阴影是
完全透明 的,你可以使用 CSS 来修改它

Esc 可以关闭 dialog,你也可以提供一个按钮来触发 close()

还有一个方法是 show(),它也可以让 dialog 显现,但与 showModal()
不同的是它没有阴影,用户可以与非 dialog 元素进行交互

output 元素

output 元素用于不同类型的输出,比如计算或脚本输出:

浏览器支持和 Polyfill

目前,只有 chrome 支持 <dialog>Firefox 需要在 about:config
里允许 dom.dialog_element.enabled 才能正常使用,我猜想,Firefox
在不久的将来就会支持

图片 7

上图为
caniuse.com
关于 dialog 特性主流浏览器的兼容情况

幸运的是,我们可以使用
dialog-polyfill
来缓解这种尴尬,它既提供了 JavaScript
的行为,也包含了默认的样式,我们可以使用 npm 来安装它,也可以使用
<script> 标签来引用它。目前,它已支持各主流浏览器,包括 IE 9
及其以上版本

只是,在使用它时,每个 dialog 需要使用下面语句进行初始化

dialogPolyfill.registerDialog(dialog);

并且,它并不会取代浏览器原生的行为

实例

<output id="result" onforminput="resCalc()"></output>

拥有若干涉及表单的元素和属性。
本章介绍以下新的表单元素: datalist keygen output 浏览器支持 datalist No
No 9.5 No No keygen No No 10.5 3.0 No…

样式

打开和关闭模态框是最基本的,但这是肯定不够的,<dialog>
最开始时样式是不怎么好看的,因此,我们需要自定义它的样式,此外,我们可以通过设置伪元素
::backdrop 来优化 <dialog> 显现时背影的样式

dialog {
    padding: 0;
    width: 478px;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    border: 0;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.1);
}

为了兼容老的浏览器,使用 polyfill 时,::backdrop 是不起作用的,但
polyfill 会在 dialog 后面添加一个 .backdrop
元素,我们可以像下面这样定位它

dialog + .backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

接下来,是时候向 bialog 里添加更多的内容,一般包括 headerbody
footer

<dialog id="sweet-modal">
  <h3 class="modal-header">sweet dialog</h3>
  <div class="modal-body">
    <p>This is a sweet dialog, which is much better.</p>
  </div>
  <footer class="modal-footer">
    <button id="get-it" type="button">Get</button>
  </footer>
</dialog>

最后,在添加一些 CSS,你就能得到你想要的

进阶操作

通常,我们期望能从 dialog 中获取一些用户的信息。关闭 dialog
时,我们可以给 close() 传递一个 string,然后通过 dialog 元素的
returnValue 属性来获取

modal.close('Accepted');

console.log(modal.returnValue); // logs `Accepted`

当然,还存在额外的事件我们可以监听,其中,最常用的可能是 close(关闭
dialog 时触发),还有 cancel (用户按 Esc 关闭 dialog 时触发)

此外,我们可能还期望点击 dialog
旁边的阴影来关闭,当然,这也是有解决办法的。点击阴影会触发 dialog
的点击事件,如果 dialog 的子元素占满了整个
dialog,那么我们可以通过监听 dialog 的点击,当 targetmodal
时来关闭它

modal.addEventListener('click', (event) => {
    if (event.target === modal) {
        modal.close('cancelled');
    }
});

当然,这不是完美的,但它确实是有效的,如果你有更好的方式,欢迎在评论中交流

总结

说了这么多,不如自己实际演练一番,作者也做了一个
demo,欢迎参考

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图