-
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
doc: add onbeforeprint/onbeforeunload/onblur/oncanplay document.
- Loading branch information
1 parent
0da66fe
commit f7306c2
Showing
7 changed files
with
290 additions
and
60 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,52 @@ | ||
| onbeforeprint.md | ||
| HTML onbeforeprint 属性 | ||
| === | ||
|
|
||
| 欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/attribute/onbeforeprint.md">docs/attribute/onbeforeprint.md</a> 文件，共建 HTML Tutorial 文档。 | ||
| ## 定义和用法 | ||
|
|
||
| `onbeforeprint` 属性在页面即将被打印时触发（在打印对话框出现之前）。 | ||
|
|
||
| **提示：** `onbeforeprint` 属性通常与 `onafterprint` 属性一起使用。 | ||
|
|
||
| ## 适用于 | ||
|
|
||
| `onbeforeprint` 属性是 [事件属性](../reference/eventattributes.md) 的一部分，可用于以下元素： | ||
|
|
||
| | 元素 | 事件 | | ||
| | --- | --- | | ||
| | [\<body>](../tags/body.md) | [onbeforeprint](../attribute/onbeforeprint.md) | | ||
| <!--rehype:style=width: 100%; display: inline-table;--> | ||
|
|
||
| ## 示例 | ||
|
|
||
| 在即将打印页面时执行 JavaScript： | ||
|
|
||
| ```html idoc:preview:iframe | ||
| <body onbeforeprint="myFunction()"> | ||
|
|
||
| <h1>尝试打印此文档</h1> | ||
| <p><b>提示:</b> 键盘快捷键，例如 Ctrl+P/Command+P 设置要打印的页面。</p> | ||
| <p><b>注意:</b> Safari 和 Opera 不支持 onbeforeprint 事件。</p> | ||
|
|
||
| <script> | ||
| function myFunction() { | ||
| alert("You are about to print this document!"); | ||
| } | ||
| </script> | ||
| </body> | ||
| ``` | ||
|
|
||
| ## 浏览器支持 | ||
|
|
||
| 表中的数字指定了完全支持该事件的第一个浏览器版本。 | ||
|
|
||
| | 事件属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] | | ||
| | --- | --- | --- | --- | --- | --- | | ||
| | onbeforeprint | 63 | Yes | Yes | ❌ 不支持 | ❌ 不支持 | | ||
| <!--rehype:style=width: 100%; display: inline-table;--> | ||
|
|
||
|
|
||
| [1]: ../assets/chrome.svg | ||
| [2]: ../assets/edge.svg | ||
| [3]: ../assets/firefox.svg | ||
| [4]: ../assets/safari.svg | ||
| [5]: ../assets/opera.svg |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,66 @@ | ||
| onbeforeunload.md | ||
| HTML onbeforeunload 属性 | ||
| === | ||
|
|
||
| 欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/attribute/onbeforeunload.md">docs/attribute/onbeforeunload.md</a> 文件，共建 HTML Tutorial 文档。 | ||
| ## 定义和用法 | ||
|
|
||
| `onbeforeunload` 事件在文档即将被卸载时触发。 | ||
|
|
||
| 此事件允许您在确认对话框中显示一条消息，以通知用户他/她是要留下还是离开当前页面。 | ||
|
|
||
| 确认框中显示的默认消息在不同的浏览器中有所不同。 但是，标准消息类似于“您确定要离开此页面吗？”。 您无法删除此消息。 | ||
|
|
||
| 但是，您可以将自定义消息与默认消息一起编写。 请参阅此页面上的第一个示例。 | ||
|
|
||
| **注意：** 在 Firefox 中，只会显示默认消息（不是自定义消息（如果有））。 | ||
|
|
||
| ## 适用于 | ||
|
|
||
| `onbeforeunload` 属性是 [Event Attributes](../attribute/onbeforeunload.md) 的一部分，可用于以下元素： | ||
|
|
||
| | 元素 | 事件 | | ||
| | --- | --- | | ||
| | [\<body>](../tags/body.md) | [onbeforeunload](../attribute/onbeforeunload.md) | | ||
| <!--rehype:style=width: 100%; display: inline-table;--> | ||
|
|
||
|
|
||
| [1]: ../assets/chrome.svg | ||
| [2]: ../assets/edge.svg | ||
| [3]: ../assets/firefox.svg | ||
| [4]: ../assets/safari.svg | ||
| [5]: ../assets/opera.svg | ||
|
|
||
|
|
||
| ## 示例 | ||
|
|
||
| 当页面即将被卸载时执行 JavaScript： | ||
|
|
||
| ```html idoc:preview:iframe | ||
| <body onbeforeunload="return myFunction()"> | ||
| <p>关闭此窗口，按 F5 或单击下面的链接以调用 onbeforeunload 事件。</p> | ||
|
|
||
| <a href="https://jaywcjlove.github.io/html-tutorial">单击此处访问 https://jaywcjlove.github.io/html-tutorial</a> | ||
|
|
||
| <script> | ||
| function myFunction() { | ||
| return "在这里写一些聪明的东西......"; | ||
| } | ||
| </script> | ||
| </body> | ||
| ``` | ||
|
|
||
| ## 浏览器支持 | ||
|
|
||
| 表中的数字指定了完全支持该事件的第一个浏览器版本。 | ||
|
|
||
| | 事件属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] | | ||
| | --- | --- | --- | --- | --- | --- | | ||
| | onbeforeunload | Yes | Yes | Yes | Yes | 15.0 | | ||
| <!--rehype:style=width: 100%; display: inline-table;--> | ||
|
|
||
|
|
||
| [1]: ../assets/chrome.svg | ||
| [2]: ../assets/edge.svg | ||
| [3]: ../assets/firefox.svg | ||
| [4]: ../assets/safari.svg | ||
| [5]: ../assets/opera.svg | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,49 @@ | ||
| onblur.md | ||
| HTML onblur 属性 | ||
| === | ||
|
|
||
| 欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/attribute/onblur.md">docs/attribute/onblur.md</a> 文件，共建 HTML Tutorial 文档。 | ||
| ## 定义和用法 | ||
|
|
||
| `onblur` 属性会在元素失去焦点时触发。 | ||
|
|
||
| Onblur 最常与表单验证代码一起使用（例如，当用户离开表单字段时）。 | ||
|
|
||
| **提示：** `onblur` 属性与 `onfocus` 属性相反。 | ||
|
|
||
| ## 适用于 | ||
|
|
||
| `onblur` 属性是 [事件属性](../reference/eventattributes.md) 的一部分，可用于任何 HTML 元素。 | ||
|
|
||
| | 元素 | 事件 | | ||
| | --- | --- | | ||
| | 所有 HTML 元素 | [onblur](../attribute/onblur.md) | | ||
| <!--rehype:style=width: 100%; display: inline-table;--> | ||
|
|
||
| ## 示例 | ||
|
|
||
| 当用户离开时验证输入字段： | ||
|
|
||
| ```html idoc:preview:iframe | ||
| 输入你的名字： <input type="text" name="fname" id="fname" onblur="myFunction()"> | ||
| <p>当您离开输入字段时，会触发一个函数，将输入文本转换为大写。</p> | ||
|
|
||
| <script> | ||
| function myFunction() { | ||
| var x = document.getElementById("fname"); | ||
| x.value = x.value.toUpperCase(); | ||
| } | ||
| </script> | ||
| ``` | ||
|
|
||
| ## 浏览器支持 | ||
|
|
||
| | 事件属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] | | ||
| | --- | --- | --- | --- | --- | --- | | ||
| | onblur | Yes | Yes | Yes | Yes | Yes | | ||
| <!--rehype:style=width: 100%; display: inline-table;--> | ||
|
|
||
| [1]: ../assets/chrome.svg | ||
| [2]: ../assets/edge.svg | ||
| [3]: ../assets/firefox.svg | ||
| [4]: ../assets/safari.svg | ||
| [5]: ../assets/opera.svg | ||
|
|
Oops, something went wrong.