Living Standard â Last Updated 1 September 2026
hidden屿§contenteditableã³ã³ãã³ã屿§designModeã®ã²ãã¿ãŒããã³ã»ãã¿ãŒinputmode屿§enterkeyhint屿§Support in one engine only.
Support in all current engines.
ãã¹ãŠã®ã¯hiddenã³ã³ãã³ã屿§èšå®ãæã£ãŠãããã屿§ã¯ã次ã®ããŒã¯ãŒããšç¶æ
ãæã€ã§ããïŒ
| ããŒã¯ãŒã | ç¶æ | æŠèŠ |
|---|---|---|
hidden | é衚瀺 | ã¬ã³ããªã³ã°ãããªãã |
until-found | Hidden Until Found | ã¬ã³ããªã³ã°ãããªããã ããã³ã§å éšã®ã³ã³ãã³ãã«ã¢ã¯ã»ã¹ã§ããã |
屿§ã®æ¬ æå€ã®ããã©ã«ãã¯Not Hiddenç¶æ ã§ãããç¡å¹ãªå€ã®ããã©ã«ãããã³ç©ºã®å€ã®ããã©ã«ãã¯ãäž¡æ¹ãšãç¶æ ã§ããã
èŠçŽ ãç¶æ ã®å±æ§ãæã€å Žåãããã¯ããã®èŠçŽ ããŸã ãªãããšããããã¯ãã¯ãããŒãžã®çŸåšã®ç¶æ ã«ã¯çŽæ¥é¢ä¿ããªãããŸãã¯ããŠãŒã¶ãŒãçŽæ¥ã¢ã¯ã»ã¹ããã®ãšã¯å¯Ÿç §çã«ãããŒãžã®ä»ã®éšåã§åå©çšããã³ã³ãã³ãã宣èšããããã«äœ¿çšãããŠããããšã瀺ãããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãç¶æ ã«ããèŠçŽ ãã¬ã³ããªã³ã°ãã¹ãã§ãªãã
The requirement for user agents not to render elements that are in the state can be implemented indirectly through the style layer. For example, a web browser could implement these requirements using the rules suggested in the Rendering section.
èŠçŽ ãã«ãã屿§ãæã€å Žåããã®èŠçŽ ã¯ç¶æ ã®ããã«é衚瀺ã«ãªã£ãŠããããèŠçŽ å ã®ã³ã³ãã³ãã¯ããã³ã«ã¢ã¯ã»ã¹ã§ããããšã瀺ãããããã®æ©èœãèŠçŽ ã®ãµãããªãŒã«ããã¿ãŒã²ããã«ã¹ã¯ããŒã«ããããšãããšããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯å±æ§ãåé€ããŠå 容ã衚瀺ããŠãããã¿ãŒã²ããããŒãã§ãå®è¡ããŠã¹ã¯ããŒã«ããã
Web browsers will use 'content-visibility: hidden' instead of 'display: none' when the attribute is in the state, as specified in the Rendering section.
ãã®å±æ§ã¯éåžžCSSã䜿çšããŠå®è£ ãããŠãããããCSSã䜿çšããŠäžæžãããããšãã§ãããããšãã°ã'display: block'ããã¹ãŠã®èŠçŽ ã«é©çšããèŠåã¯ãç¶æ ã®åœ±é¿ãçžæ®ºããã ããããããã£ãŠèè ã¯ãæåŸ éãã«å±æ§ãã¹ã¿ã€ã«ä»ããããŠããããšã確èªãããã®ã¹ã¿ã€ã«ã·ãŒããæžããšãã«æ³šæããå¿ èŠããããããã«ãç¶æ ããµããŒãããªãã¬ã¬ã·ãŒãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ã'content-visibility: hidden'ã§ã¯ãªã'display: none'ã«ãªããããèè ã¯ã¹ã¿ã€ã«ã·ãŒããèŠçŽ ã®'display'ãŸãã¯'content-visibility'ããããã£ã倿Žããªãããã«ããããšãå§ããã
ç¶æ ã«å±æ§ããã€èŠçŽ ã¯ã'display: none'ã§ã¯ãªã'content-visibility: hidden'ã䜿çšãããããç¶æ ã«ã¯ãç¶æ Dãšã¯ç°ãªã2ã€ã®æ³šæç¹ãååšããïŒ
ããŒãžå æ€çŽ¢ã§è¡šç€ºããã«ã¯ãèŠçŽ ãã®åœ±é¿ãåããå¿ èŠãããã ããã¯ãç¶æ ã®èŠçŽ ã'none'ã'contents'ããŸãã¯'inline'ã®'display'å€ãæã€å Žåããã®èŠçŽ ã¯ããŒãžå æ€çŽ¢ã«ãã£ãŠè¡šç€ºãããªãããšãæå³ããã
ç¶æ ã®å ŽåãèŠçŽ ã¯äŸç¶ãšããŠããããããã¯ã€ãŸããããŒããŒãããŒãžã³ãããã³ããã£ã³ã°ã¯èŠçŽ ã®åšå²ã«ã¬ã³ããªã³ã°ããããŸãŸã«ãªãã
次ã®éªšæ Œã®äŸã«ãããŠã屿§ã¯ããŠãŒã¶ãŒããã°ã€ã³ãããŸã§ãŠã§ãã²ãŒã ã®ã¡ã€ã³ç»é¢ãé衚瀺ã«ããããã«äœ¿çšãããïŒ
< h1 > The Example Game</ h1 >
< section id = "login" >
< h2 > Login</ h2 >
< form >
...
<!-- calls login() once the user's credentials have been checked -->
</ form >
< script >
function login() {
// switch screens
document. getElementById( 'login' ). hidden = true ;
document. getElementById( 'game' ). hidden = false ;
}
</ script >
</ section >
< section id = "game" hidden >
...
</ section >
屿§ã¯ãå¥ã®ãã¬ãŒã³ããŒã·ã§ã³ã«åæ³çã«ç€ºãããšãã§ããã³ã³ãã³ããé ãããã«äœ¿çšãããŠã¯ãªããªããããšãã°ãã¿ãä»ãã€ã³ã¿ãŒãã§ã€ã¹ã¯åã«ãªãŒããŒãããŒãã¬ãŒã³ããŒã·ã§ã³ã®äžçš®ã§ãããããã¿ãä»ããã€ã¢ãã°ã§ããã«ãé ãããã«ã䜿çšããããšã¯èª€ãã§ãããâããã¯ã¹ã¯ããŒã«ããŒããã€1ã€ã®å€§ããªããŒãžå ã®ãã¹ãŠã®ãã©ãŒã ã³ã³ãããŒã«ã瀺ãã®ãšåæ§ã§ãããã¡ããã©1ã€ã®ãã¬ãŒã³ããŒã·ã§ã³ããã³ã³ãã³ããé衚瀺ã«ããããã«ãã®å±æ§ã䜿çšããããšãåæ§ã«èª€ãã§ãããâäœãããšããŒã¯ãããå Žåãããã¯ãããšãã°ã¹ã¯ãªãŒã³ãªãŒããŒãªã©ãå«ãããã¹ãŠã®ãã¬ãŒã³ããŒã·ã§ã³ããé ãããŠããã
èªèº«ãã§ãªãèŠçŽ ã¯ãã§ããèŠçŽ ãžãããŠã¯ãªããªããèªèº«ãã§ãªãããã³èŠçŽ ã®for屿§ãåæ§ã«ãã§ããèŠçŽ ãåç
§ããŠã¯ãªããªããã©ã¡ãã®å Žåãããã®ãããªåç
§ã¯ãŠãŒã¶ãŒã®æ··ä¹±ãåŒãèµ·ããã ããã
ããããèŠçŽ ããã³ã¹ã¯ãªããã¯ãä»ã®ã³ã³ããã¹ãã§ã§ããèŠçŽ ãåç §ããŠãããã
ããšãã°ã屿§ã§ããŒã¯ãããã»ã¯ã·ã§ã³ã«ãªã³ã¯ãã屿§ã䜿çšããã®ã¯èª€ãã ãããã³ã³ãã³ããé©åãŸãã¯é¢é£ããªãå Žåãããã«ãªã³ã¯ããçç±ã¯ãªãã
ããããèªèº«ãã§ãã説æãåç §ããããã«ãARIA 屿§ã䜿çšããããšã¯æ§ããªãã説æãé衚瀺ã«ããããšã¯ããããåç¬ã§æçšã§ãªãããšãæå³ããäžæ¹ã§ããããã¯ããããã説æããèŠçŽ ããåç §ãããç¹å®ã®ã³ã³ããã¹ãã«ãããŠæçšã§ããæ¹æ³ã§èšè¿°ããããšãã§ããã
åæ§ã«ã屿§ãæã€èŠçŽ ã¯ããªãã¹ã¯ãªãŒã³ãããã¡ãŒãšããŠã¹ã¯ãªããåãããã°ã©ãã£ãã¯ã¹ãšã³ãžã³ã«ãã£ãŠäœ¿çšããããããããããã©ãŒã ã³ã³ãããŒã«ã¯ã屿§ã䜿çšããé ãèŠçŽ ãåç §ãããããããªãã
屿§ã«ãã£ãŠé衚瀺ã«ãããã»ã¯ã·ã§ã³å ã®èŠçŽ ã¯äŸç¶ãšããŠã¢ã¯ãã£ãã§ãããããšãã°ããã®ãããªã»ã¯ã·ã§ã³ã§ã®ã¹ã¯ãªããããã©ãŒã ã³ã³ãããŒã«ã¯ãäŸç¶ãšããŠå®è¡ããã³éä¿¡ããããããã®ãã¬ãŒã³ããŒã·ã§ã³ã®ã¿ããŠãŒã¶ãŒã«å€æŽãããã
Support in all current engines.
The hidden getter steps are:
If the attribute is in the state, then return "".
If the attribute is set, then return true.
falseãè¿ãã
The setter steps are:
If the given value is a string that is an match for "", then set the attribute to "".
Otherwise, if the given value is false, then remove the attribute.
Otherwise, if the given value is the empty string, then remove the attribute.
Otherwise, if the given value is null, then remove the attribute.
Otherwise, if the given value is 0, then remove the attribute.
Otherwise, if the given value is NaN, then remove the attribute.
Otherwise, set the attribute to the empty string.
An ancestor reveal pair is a consisting of a node and a string.
The ancestor revealing algorithm given a node target is:
Let ancestorsToReveal be « ».
Let ancestor be target.
While ancestor has a parent node within the :
If ancestor has a attribute in the state, then (ancestor, "until-found") to ancestorsToReveal.
If ancestor is slotted into the second slot of a element which does not have an attribute, then (ancestor's parent node, "details") to ancestorsToReveal.
Set ancestor to the parent node of ancestor within the .
For each (ancestorToReveal, revealType) of ancestorsToReveal:
If ancestorToReveal is not , then return.
If revealType is "until-found":
If ancestorToReveal's attribute is not in the state, then return.
named at ancestorToReveal with the attribute initialized to true.
If ancestorToReveal is not , then return.
If ancestorToReveal's attribute is not in the state, then return.
Remove the attribute from ancestorToReveal.
Otherwise:
: revealType is "details".
If ancestorToReveal has an attribute, then return.
Set ancestorToReveal's attribute to the empty string.
äœææã®åæå€ãå«ãããã©ããŒã¹å¯èœãªããã²ãŒãå¯èœã®ã·ã¹ãã å¯èŠç¶æ ã¯ããŠãŒã¶ãŒ ãšãŒãžã§ã³ãã«ãã£ãŠæ±ºå®ããããããšãã°ããã©ãŠã¶ãŒãŠã£ã³ããŠãæå°åãããŠãããããã©ãŠã¶ãŒã¿ããçŸåšããã¯ã°ã©ãŠã³ãã«ãããããŸãã¯ã¿ã¹ã¯ã¹ã€ããã£ãŒãªã©ã®ã·ã¹ãã èŠçŽ ãããŒãžãèŠãé ããŠãããã©ããã衚ãã
When a user agent determines that the system visibility state for traversable navigable traversable has changed to newState, it must run the following steps:
Let navigables be the inclusive descendant navigables of traversable's active document.
For each navigable of navigables in what order?:
Let document be navigable's active document.
Queue a global task on the user interaction task source given document's relevant global object to update the visibility state of document with newState.
Documentã¯å¯èŠç¶æ
ãæã¡ãããã¯"hidden"ãŸãã¯"visible"ã®ããããã§ãæåã¯"hidden"ã«èšå®ãããã
Support in all current engines.
visibilityStateã²ãã¿ãŒã®æé ã¯ããã®å¯èŠç¶æ
ãè¿ããã®ã§ããã
Support in all current engines.
hiddenã®ã²ãã¿ãŒæé ã¯ããã®å¯èŠç¶æ
ã"hidden"ã®å Žåã¯trueãè¿ãããã以å€ã®å Žåã¯falseãè¿ããã®ã§ããã
To update the visibility state of Document document to visibilityState:
If document's visibility state equals visibilityState, then return.
Set document's visibility state to visibilityState.
Queue a new VisibilityStateEntry whose visibility state is visibilityState and whose timestamp is the current high resolution time given document's relevant global object.
Run the screen orientation change steps with document. [SCREENORIENTATION]
Run the view transition page visibility change steps with document.
Run any page visibility change steps which may be defined in other specifications, with visibility state and document.
It would be better if specification authors sent a pull request to add calls from here into their specifications directly, instead of using the page visibility change steps hook, to ensure well-defined cross-specification call order. As of the time of this writing the following specifications are known to have page visibility change steps, which will be run in an unspecified order: Device Posture API and Web NFC. [DEVICEPOSTURE] [WEBNFC]
Fire an event named visibilitychange at document, with its bubbles attribute initialized to true.
To set the initial visibility state of Document document to visibilityState:
Set document's visibility state to visibilityState.
Queue a new VisibilityStateEntry whose visibility state is document's visibility state and whose timestamp is 0.
VisibilityStateEntryã€ã³ã¿ãŒãã§ã€ã¹Support in one engine only.
VisibilityStateEntryã€ã³ã¿ãŒãã§ã€ã¹ã¯ãææžãã¢ã¯ãã£ãã«ãªã£ãç¬éãããææžã®å¯èŠæ§ã®å€æŽãå
¬éããã
function wasHiddenBeforeFirstContentfulPaint() {
const fcpEntry = performance. getEntriesByName( "first-contentful-paint" )[ 0 ];
const visibilityStateEntries = performance. getEntriesByType( "visibility-state" );
return visibilityStateEntries. some( e =>
e. startTime < fcpEntry. startTime &&
e. name === "hidden" );
}
ããŒãžãé衚瀺ã«ãããšãã¬ã³ããªã³ã°ããã³ãã®ä»ã®ãŠãŒã¶ãšãŒãžã§ã³ãæäœã®ã¹ããããªã³ã°ãçºçããå¯èœæ§ãããããããã®ãããªã¹ããããªã³ã°ãçºçããããšã瀺ããã®ãšããŠãå¯èŠã®å€æŽã䜿çšããã®ãäžè¬çã§ããããã ããé·æéã®éã¢ã¯ãã£ãç¶æ ãªã©ãä»ã®èŠå ã«ãã£ãŠããããŸããŸãªãã©ãŠã¶ãŒã§ã¹ããããªã³ã°ãçºçããå¯èœæ§ãããã
[Exposed =(Window )]
interface VisibilityStateEntry : PerformanceEntry {
readonly attribute DOMString name ; // shadows inherited name
readonly attribute DOMString entryType ; // shadows inherited entryType
readonly attribute DOMHighResTimeStamp startTime ; // shadows inherited startTime
readonly attribute unsigned long duration ; // shadows inherited duration
};
VisibilityStateEntryã¯ãé¢é£ä»ããããDOMHighResTimeStamp ã¿ã€ã ã¹ã¿ã³ããæã€ã
VisibilityStateEntryã¯ãé¢é£ä»ãããã"visible"ãŸãã¯"hidden"å¯èŠç¶æ
ãæã€ã
nameã²ãã¿ãŒã¹ãããã¯ãthisã®å¯èŠç¶æ
ãè¿ãã
entryTypeã²ãã¿ãŒã¹ãããã¯ã"visibility-state"ãè¿ãã
startTimeã²ãã¿ãŒã¹ãããã¯ãthisã®ã¿ã€ã ã¹ã¿ã³ããè¿ãã
durationã²ãã¿ãŒã¹ãããã¯0ãè¿ãã
åãååã®å±æ§ã®èª¬æã«ã€ããŠã¯ãinertãåç
§ã®ããšã
ããŒãïŒç¹ã«èŠçŽ ããã³ããã¹ãããŒãïŒã¯äžæŽ»æ§ã§ããå¯èœæ§ããããããŒããäžæŽ»æ§ã§ããå ŽåïŒ
ããããã¹ãã¯ããããã'pointer-events' CSSããããã£ã'none'ã«èšå®ãããŠãããã®ããã«åäœããªããã°ãªããªãã
ããã¹ãéžææ©èœã¯ããããã'user-select' CSSããããã£ã'none'ã«èšå®ãããŠãããã®ããã«åäœããªããã°ãªããªãã
ç·šéå¯èœã§ããå ŽåãããŒãã¯ããããç·šéäžå¯èœã§ãããã®ããã«åäœããã
ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãããŒãžå æ€çŽ¢ã®ç®çã§ããŒããç¡èŠãã¹ãã§ããã
éäŸãäžæŽ»æ§ããŒãã«ãã©ãŒã«ã¹ãåœãŠãããšã¯ã§ããããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯é掻æ§ããŒããã¢ã¯ã»ã·ããªãã£APIãŸãã¯æ¯æŽæè¡ã«å ¬éããªããã³ãã³ãã§ããäžæŽ»æ§ããŒãã¯ãäžèšã®æ¹æ³ã§ã¯ãŠãŒã¶ãŒã«ã¯äœ¿çšäžèœãšãªãã
ãããã«ããããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãããŒãžå æ€çŽ¢ããã³ããã¹ãéžæã®å¶éããŠãŒã¶ãŒãäžæžãå¯èœã«ããŠãããã
ããã©ã«ãã§ã¯ãããŒãã¯äžæŽ»æ§ã§ã¯ãªãã
subjectãdocumentã®æäžäœã¬ã€ã€ãŒã®äžçªäžã®dialogèŠçŽ ã§ããå ŽåãDocument documentã¯ã¢ãŒãã«ãã€ã¢ãã°ããã¯ã¹ã«ãã£ãŠãããã¯ãããsubjectã§ãããdocumentããã®ããã«ãããã¯ãããäžæ¹ã§ãdocumentã«æ¥ç¶ãããŠãããã¹ãŠã®ããŒãã¯ãsubjectèŠçŽ ãšãã®ãã©ããããªãŒã®åå«ãé€ããäžæŽ»æ§ãšããŒã¯ãããªããã°ãªããªãã
subjectã¯ãinert屿§ãä»ããŠããã«äžæŽ»æ§ã«ãªãããšãã§ããããsubjectèªäœã«æå®ãããŠããå Žåã«éãïŒã€ãŸããsubjectã¯ç¥å
ã®äžæŽ»æ§ãåé¿ããïŒãsubjectã®ãã©ããããªãŒã®åå«ã¯ãåãããã«äžæŽ»æ§ã«ãªãããšãããã
dialogèŠçŽ ã®showModal()ã¡ãœããã¯ãdialogèŠçŽ ãããŒãææžã®æäžäœã¬ã€ã€ãŒã«è¿œå ããããšã«ãã£ãŠããã®ã¡ã«ããºã ãããªã¬ãŒãããã
inert屿§Support in all current engines.
inert屿§ã¯ããã®ååšã«ãã£ãŠãïŒã¢ãŒãã«ãã€ã¢ãã°ãªã©ïŒä»ã®æ¹æ³ã§ã¯äžæŽ»æ§åãå
ããªãèŠçŽ ããã³ãã®ãã¹ãŠã®ãã©ããããªãŒã®åå«ããŠãŒã¶ãŒãšãŒãžã§ã³ãã«ãã£ãŠäžæŽ»æ§ã«ãããããšã瀺ãçåœå±æ§ã§ããã
äžæŽ»æ§ãµãããªãŒã¯ãäžæŽ»æ§ç¶æ
ã§ã¯ãªãããŒãžã®å€èгãçè§£ãŸãã¯äœ¿çšããããã«éèŠãªã³ã³ãã³ããŸãã¯ã³ã³ãããŒã«ãå«ãã¹ãã§ãªããäžæŽ»æ§ãµãããªãŒå
ã®ã³ã³ãã³ãã¯ããã¹ãŠã®ãŠãŒã¶ãŒã«ãã£ãŠèªèã§ããããŸãã¯ã€ã³ã¿ã©ã¯ãã£ãã§ã¯ãªããèè
ã¯ãèŠçŽ ã衚ãå
容ãäœããã®åœ¢ã§èŠèŠçã«é ãããŠããªãéããèŠçŽ ãäžæŽ»æ§ãšæå®ãã¹ãã§ãªããã»ãšãã©ã®å Žåãèè
ã¯åã
ã®ãã©ãŒã ã³ã³ãããŒã«ã«inert屿§ãæå®ãã¹ãã§ãªãããã®ãããªå Žåã¯ãdisabled屿§ã®æ¹ãããããé©åã§ããã
次ã®äŸã¯ã"loading"ã¡ãã»ãŒãžã«ãã£ãŠèŠèŠçã«é ãããŠãããéšåçã«èªã¿èŸŒãŸããã³ã³ãã³ããäžæŽ»æ§ãšããŠããŒã¯ããæ¹æ³ã瀺ãã
< section aria-labelledby = s1 >
< h3 id = s1 > Population by City</ h3 >
< div class = container >
< div class = loading >< p > Loading...</ p ></ div >
< div inert >
< form >
< fieldset >
< legend > Date range</ legend >
< div >
< label for = start > Start</ label >
< input type = date id = start >
</ div >
< div >
< label for = end > End</ label >
< input type = date id = end >
</ div >
< div >
< button > Apply</ button >
</ div >
</ fieldset >
</ form >
< table >
< caption > From 20-- to 20--</ caption >
< thead >
< tr >
< th > City</ th >
< th > State</ th >
< th > 20-- Population</ th >
< th > 20-- Population</ th >
< th > Percentage change</ th >
</ tr >
</ thead >
< tbody >
<!-- ... -->
</ tbody >
</ table >
</ div >
</ div >
</ section > 
"loading"ã®ãªãŒããŒã¬ã€ã¯ãäžæŽ»æ§ã®ã³ã³ãã³ããèŠãé ããäžæŽ»æ§ã®ã³ã³ãã³ããçŸåšã¢ã¯ã»ã¹å¯èœã§ãªãããšãèŠèŠçã«æããã«ãããèŠåºãããã³"loading"ã®ããã¹ãã¯ãinert屿§ããã€èŠçŽ ã®åå«ã§ã¯ãªãããšã«æ³šæãããããã¯ããã®ããã¹ãããã¹ãŠã®ãŠãŒã¶ãŒãã¢ã¯ã»ã¹å¯èœã«ããããäžæŽ»æ§ã®ã³ã³ãã³ãã¯èª°ãæäœã§ããªããªãã
ããã©ã«ãã§ã¯ãèŠçŽ ãŸãã¯ãã®ãµãããªãŒãäžæŽ»æ§ã§ããããšãç€ºãæ°žç¶çãªèŠèŠç衚瀺ã¯ååšããªãããã®ãããªã³ã³ãã³ãã«é©åãªèŠèŠçãªã¹ã¿ã€ã«ã¯ãå€ãã®å Žåãã³ã³ããã¹ãã«äŸåãããäŸãã°ãäžæŽ»æ§ãªç»é¢å€ã®ããã²ãŒã·ã§ã³ããã«ã¯ããã®ç»é¢å€ã®äœçœ®ãã³ã³ãã³ããèŠèŠçã«ããããã®ã§ãããã©ã«ãã¹ã¿ã€ã«ãå¿
èŠãšããªããåæ§ã«ãã¢ãŒãã«dialogèŠçŽ ã®backdropã¯ããŠã§ãããŒãžã®äžæŽ»æ§ãªã³ã³ãã³ããå
·äœçã«ã¹ã¿ã€ã«èšå®ããã®ã§ã¯ãªããèŠèŠçã«ããããææ®µãšããŠæ©èœããã
ããããä»ã®å€ãã®ç¶æ³ã§ã¯ããŠãŒã¶ãŒã®æ··ä¹±ãé¿ããããã«ãèè ã¯ææžã®ã©ã®éšåãã¢ã¯ãã£ãã§ãã©ã®éšåãäžæŽ»æ§ã§ããããæç¢ºã«ããŒã¯ããããšã匷ãå§ãããç¹ã«ããã¹ãŠã®ãŠãŒã¶ãŒãããŒãžã®ãã¹ãŠã®éšåãäžåºŠã«è¡šç€ºã§ããããã§ã¯ãªãããšãèŠããŠãã䟡å€ãããã ããšãã°ãã¹ã¯ãªãŒã³ãªãŒããŒã®ãŠãŒã¶ãŒãå°åã®ããã€ã¹ãæ¡å€§é¡ã䜿çšããŠãããŠãŒã¶ãŒãç¹ã«å°ããªãŠã£ã³ããŠã䜿çšããŠãããŠãŒã¶ãŒã§ãããããŒãžã®ã¢ã¯ãã£ããªéšåãèŠãããšãã§ãããäžæŽ»æ§ãªã»ã¯ã·ã§ã³ãæããã«äžæŽ»æ§ã§ãªãå Žåã¯ãã©ã¹ãã¬ãŒã·ã§ã³ãæããå¯èœæ§ãããã
ãŠãŒã¶ãŒã«è¿·æãšãªãå¯èœæ§ãããç¹å®ã®APIïŒãããã¢ãããéããæ¯åããé»è©±ãªã©ïŒã®æªçšãé²ãããã«ããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ããŠãŒã¶ãŒããŠã§ãããŒãžãã¢ã¯ãã£ãã«æäœããŠããããŸãã¯å°ãªããšã1åã¯ããŒãžãæäœããå Žåã«ã®ã¿ããããã®APIãèš±å¯ããããã®"ã¢ã¯ãã£ããªçžäºäœçš"ã®ç¶æ ã¯ããã®ç¯ã§å®çŸ©ãããã¡ã«ããºã ãéããŠç¶æãããã
For the purpose of tracking user activation, each Window W has two relevant values:
A last activation timestamp, which is either a DOMHighResTimeStamp, positive infinity (indicating that W has never been activated), or negative infinity (indicating that the activation has been consumed). Initially positive infinity.
A last history-action activation timestamp, which is either a DOMHighResTimeStamp or positive infinity, initially positive infinity.
A user agent also defines a transient activation duration, which is a constant number indicating how long a user activation is available for certain user activation-gated APIs (e.g., for opening popups).
The transient activation duration is expected be at most a few seconds, so that the user can possibly perceive the link between an interaction with the page and the page calling the activation-gated API.
We then have the following boolean user activation states for W:
When the current high resolution time given W is greater than or equal to the last activation timestamp in W, W is said to have sticky activation.
This is W's historical activation state, indicating whether the user has ever interacted in W. It starts false, then changes to true (and never changes back to false) when W gets the very first activation notification.
When the current high resolution time given W is greater than or equal to the last activation timestamp in W, and less than the last activation timestamp in W plus the transient activation duration, then W is said to have transient activation.
This is W's current activation state, indicating whether the user has interacted in W recently. This starts with a false value, and remains true for a limited time after every activation notification W gets.
The transient activation state is considered expired if it becomes false because the transient activation duration time has elapsed since the last user activation. Note that it can become false even before the expiry time through an activation consumption.
When the last history-action activation timestamp of W is not equal to the last activation timestamp of W, then W is said to have history-action activation.
This is a special variant of user activation, used to allow access to certain session history APIs which, if used too frequently, would make it harder for the user to traverse back using browser UI. It starts with a false value, and becomes true whenever the user interacts with W, but is reset to false through history-action activation consumption. This ensures such APIs cannot be used multiple times in a row without an intervening user activation. But unlike transient activation, there is no time limit within which such APIs must be used.
The last activation timestamp and last history-action activation timestamp are retained even after the Document changes its fully active status (e.g., after navigating away from a Document, or navigating to a cached Document). This means sticky activation state spans multiple navigations as long as the same Document gets reused. For the transient activation state, the original expiry time remains unchanged (i.e., the state still expires within the transient activation duration limit from the original activation triggering input event). It is important to consider this when deciding whether to base certain things off sticky activation or transient activation.
When a user interaction causes firing of an activation triggering input event in a Document document, the user agent must perform the following activation notification steps before dispatching the event:
Assert: document is fully active.
Let windows be « document's relevant global object ».
Extend windows with the active window of each of document's ancestor navigables.
Extend windows with the active window of each of document's descendant navigables, filtered to include only those navigables whose active document's origin is same origin with document's origin.
For each window in windows:
Set window's last activation timestamp to the current high resolution time.
Notify the close watcher manager about user activation given window.
An activation triggering input event is any event whose isTrusted attribute is true and whose type is one of:
"keydown", provided the key is neither the Esc key nor a shortcut key reserved by the user agent;
"mousedown";
"pointerdown", provided the event's pointerType is "mouse";
"pointerup", provided the event's pointerType is not "mouse"; or
"touchend".
Activation consuming APIs defined in this and other specifications can consume user activation by performing the following steps, given a Window W:
If W's navigable is null, then return.
Let top be W's navigable's top-level traversable.
Let navigables be the inclusive descendant navigables of top's active document.
Let windows be the list of Window objects constructed by taking the active window of each item in navigables.
For each window in windows, if window's last activation timestamp is not positive infinity, then set window's last activation timestamp to negative infinity.
History-action activation-consuming APIs can consume history-action user activation by performing the following steps, given a Window W:
If W's navigable is null, then return.
Let top be W's navigable's top-level traversable.
Let navigables be the inclusive descendant navigables of top's active document.
Let windows be the list of Window objects constructed by taking the active window of each item in navigables.
For each window in windows, set window's last history-action activation timestamp to window's last activation timestamp.
Note the asymmetry in the sets of browsing contexts in the page that are affected by an activation notification vs an activation consumption: an activation consumption changes (to false) the transient activation states for all browsing contexts in the page, but an activation notification changes (to true) the states for a subset of those browsing contexts. The exhaustive nature of consumption here is deliberate: it prevents malicious sites from making multiple calls to an activation consuming API from a single user activation (possibly by exploiting a deep hierarchy of iframes).
ãŠãŒã¶ãŒã®ã¢ã¯ãã£ãåã«äŸåããAPIã¯ãããŸããŸãªã¬ãã«ã«åé¡ãããïŒ
ãã®APIã¯ãå®çããã¢ã¯ãã£ãåç¶æ ãtrueã§ããå¿ èŠããããããæåã®ãŠãŒã¶ãŒã«ããã¢ã¯ãã£ãåãŸã§ãããã¯ãããã
ãã®APIã¯ãäžæçãªã¢ã¯ãã£ãåç¶æ ãtrueã§ããããšãå¿ èŠãšãããããããæ¶è²»ããªããããäžæçãªç¶æ ãæéåãã«ãªããŸã§ããŠãŒã¶ãŒã«ããã¢ã¯ãã£ãåããšã«è€æ°ã®åŒã³åºããèš±å¯ãããã
ãã®APIã¯ãäžæçãªã¢ã¯ãã£ãåç¶æ ãtrueã§ããããšãå¿ èŠãšãããŠãŒã¶ãŒã«ããã¢ã¯ãã£ãåããšã®è€æ°ã®åŒã³åºããé²ãããã«ãååŒã³åºãã§ãŠãŒã¶ãŒã«ããã¢ã¯ãã£ãåãæ¶è²»ããã
ãã®APIã¯ãå±¥æŽã¢ã¯ã·ã§ã³ã®ã¢ã¯ãã£ãåç¶æ ãtrueã§ããããšãèŠæ±ãããŠãŒã¶ãŒã¢ã¯ãã£ãåããšã«è€æ°ã®ã³ãŒã«ãçºçããã®ãé²ãããã«ãåã³ãŒã«ã§å±¥æŽã¢ã¯ã·ã§ã³ã®ã¢ã¯ãã£ãåãæ¶è²»ããã
UserActivationã€ã³ã¿ãŒãã§ã€ã¹åWindowã¯ãé¢é£ä»ããããUserActivationãæã¡ãããã¯UserActivationãªããžã§ã¯ãã§ãããWindowãªããžã§ã¯ãã®äœææã«ãé¢é£ããUserActivationãWindowãªããžã§ã¯ãã®é¢é£é åã§äœæãããæ°ããUserActivationãªããžã§ã¯ãã«èšå®ããªããã°ãªããªãã
[Exposed =Window ]
interface UserActivation {
readonly attribute boolean hasBeenActive ;
readonly attribute boolean isActive ;
};
partial interface Navigator {
[SameObject ] readonly attribute UserActivation userActivation ;
};
navigator.userActivation.hasBeenActiveãŠã£ã³ããŠãã¹ãã£ãããŒã¢ã¯ãã£ããŒã·ã§ã³ãæã€ãã©ãããè¿ãã
navigator.userActivation.isActiveãŠã£ã³ããŠãäžæçã«ã¢ã¯ãã£ããŒã·ã§ã³ãæã€ãã©ãããè¿ãã
The userActivation getter steps are to return this's relevant global object's associated UserActivation.
The hasBeenActive getter steps are to return true if this's relevant global object has sticky activation, and false otherwise.
The isActive getter steps are to return true if this's relevant global object has transient activation, and false otherwise.
For the purposes of user-agent automation and application testing, this specification defines the following extension command for the Web Driver specification. It is optional for a user agent to support the following extension command. [WEBDRIVER]
| HTTP Method | URI Template |
|---|---|
`POST` | /session/{session id}/window/consume-user-activation |
The remote end steps are:
Let window be the current browsing context's active window.
Let consume be true if window has transient activation; otherwise false.
If consume is true, then consume user activation of window.
Return success with data consume.
HTMLã®ç¹å®ã®èŠçŽ ã¯ããŠãŒã¶ãŒãã¢ã¯ãã£ãã«ããããšãã§ããããšãæå³ãããã¢ã¯ãã£ãååäœãæã€ãããã¯ãåžžã«clickã€ãã³ãã«ãã£ãŠçºçããã
The user agent should allow the user to manually trigger elements that have an activation behavior, for instance using keyboard or voice input, or through mouse clicks. When the user triggers an element with a defined activation behavior in a manner other than clicking it, the default action of the interaction event must be to fire a click event at the element.
element.click()Support in all current engines.
ããããèŠçŽ ãã¯ãªãã¯ããããã®ããã«åäœããã
Each element has an associated click in progress flag, which is initially unset.
The click() method must run the following steps:
If this element is a form control that is disabled, then return.
If this element's click in progress flag is set, then return.
Set this element's click in progress flag.
Fire a synthetic pointer event named click at this element, with the not trusted flag set.
Unset this element's click in progress flag.
ToggleEventã€ã³ã¿ãŒãã§ã€ã¹Support in all current engines.
Support in all current engines.
[Exposed =Window ]
interface ToggleEvent : Event {
constructor (DOMString type , optional ToggleEventInit eventInitDict = {});
readonly attribute DOMString oldState ;
readonly attribute DOMString newState ;
readonly attribute Element ? source ;
};
dictionary ToggleEventInit : EventInit {
DOMString oldState = "";
DOMString newState = "";
Element ? source = null ;
};
event.oldStateã¯ããŒãºãããªãŒãã³ã«é·ç§»ããå Žåã¯"closed"ã«èšå®ãããªãŒãã³ããã¯ããŒãºã«é·ç§»ããå Žåã¯"open"ã«èšå®ããã
event.newStateã¯ããŒãºãããªãŒãã³ã«é·ç§»ããå Žåã¯"open"ã«èšå®ãããªãŒãã³ããã¯ããŒãºã«é·ç§»ããå Žåã¯"closed"ã«èšå®ããã
event.sourceåãæ¿ããéå§ãããšã¬ã¡ã³ãã«èšå®ãããããã¯ãpopovertargetããã³commandfor屿§ã§èšå®ã§ããããœãŒã¹èŠçŽ ããªãå Žåãnullã«èšå®ãããã
Support in all current engines.
Support in all current engines.
oldStateããã³newState屿§ã¯ãåæåãããå€ãè¿ããªããã°ãªããªãã
sourceã²ãã¿ãŒã¹ãããã¯ãthisã®currentTargetã«å¯Ÿãã åã¿ãŒã²ããsourceã®çµæãè¿ããŸãã
DOM standard issue #1328ã¯ãEventäžã§æå³ã®ããæ¹æ³ã§ãé¢é£ããã€ãã³ãããŒã¿ãããé©åã«æšæºåããæ¹æ³ã远跡ããŠãããçŸåšãå€ã«åæåãããã€ãã³ã屿§ã¯ã²ãã¿ãŒãæã€ããšãã§ããªãããããããé©åã«æå®ããã«ã¯å éšã¹ãããïŒãŸãã¯è¿œå ãã£ãŒã«ãã®ãããïŒãå¿ èŠã§ããã
toggle task trackerã¯ã次ã®ãããªæ§é äœã§ããïŒ
ToggleEvent.oldState屿§ã®ã¿ã¹ã¯ã®ã€ãã³ãã®å€ã衚ãæååãCommandEventã€ã³ã¿ãŒãã§ã€ã¹[Exposed =Window ]
interface CommandEvent : Event {
constructor (DOMString type , optional CommandEventInit eventInitDict = {});
readonly attribute Element ? source ;
readonly attribute DOMString command ;
};
dictionary CommandEventInit : EventInit {
Element ? source = null ;
DOMString command = "";
};
event.commandèŠçŽ ãå®è¡ã§ããã¢ã¯ã·ã§ã³ãè¿ãã
event.sourceãã®ã€ãã³ããçºçãããããã«çžäºäœçšããElementãè¿ãã
command屿§ã¯ãåæåãããå€ãè¿ããªããã°ãªããªãã
sourceã²ãã¿ãŒã¹ãããã¯ãthisã®currentTargetã«å¯Ÿãã åã¿ãŒã²ããsourceã®çµæãè¿ããŸãã
DOM standard issue #1328ã¯ãEventäžã§æå³ã®ããæ¹æ³ã§ãé¢é£ããã€ãã³ãããŒã¿ãããé©åã«æšæºåããæ¹æ³ã远跡ããŠãããçŸåšãå€ã«åæåãããã€ãã³ã屿§ã¯ã²ãã¿ãŒãæã€ããšãã§ããªãããããããé©åã«æå®ããã«ã¯å éšã¹ãããïŒãŸãã¯è¿œå ãã£ãŒã«ãã®ãããïŒãå¿ èŠã§ããã
ãã®ç¯ã¯éèŠç¯çã§ããã
HTMLãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ã€ã¹ã¯å žåçã«ããã©ãŒã ã³ã³ãããŒã«ãã¹ã¯ããŒã«å¯èœé åããªã³ã¯ããã€ã¢ãã°ããã¯ã¹ããã©ãŠã¶ãŒã¿ããªã©ãè€æ°ã®å¯Ÿè©±çãªãŠã£ãžããããæããããããŠã£ãžã§ããã¯ãä»ïŒããšãã°ããªã³ã¯ããã©ãŒã ã³ã³ãããŒã«ïŒãå«ããã®ïŒããšãã°ããã©ãŠã¶ãŒã¿ãããã€ã¢ãã°ããã¯ã¹ïŒããã€ãéå±€æ§é ã圢æããã
ããŒããŒãã䜿çšããã€ã³ã¿ãŒãã§ã€ã¹ãšæ å ±äº€æããå Žåãã¢ã¯ãã£ããªãŠã£ãžã§ããããããã©ãŒã«ã¹ããããšåŒã°ããã察話çãªãŠã£ãžã§ããã®éå±€æ§é ãéããŠãããŒå ¥åã¯ã·ã¹ãã ããæµããã
ã°ã©ãã£ã«ã«ç°å¢ã§åäœãããã©ãŠã¶ãŒã¿ãã«ãããŠåäœããHTMLã¢ããªã±ãŒã·ã§ã³ãèããŠã¿ãããã®ã¢ããªã±ãŒã·ã§ã³ããããã€ãã®ããã¹ãã³ã³ãããŒã«ããã³ãªã³ã¯ããã€ããŒãžãæã¡ãããèªèº«ãããã¹ãã³ã³ãããŒã«ãšãã¿ã³ãæã£ããã¢ãŒãã«ãã€ã¢ãã°ã衚瀺ããŠãããšæ³å®ããã
ãã®ã·ããªãªã«ãããŠããã®åã®éã§HTMLã¢ããªã±ãŒã·ã§ã³ãå«ããã©ãŠã¶ãŒã¿ããæã€ã ããããã©ãŒã«ã¹å¯èœãªãŠã£ãžã§ããã®éå±€æ§é ã¯ããã©ãŠã¶ãŒãŠã£ã³ããŠãå«ããããããªããã¿ãèªèº«ã¯ããã€ã¢ãã°ãšåæ§ã«ããã®åãšããŠãæ§ã ãªãªã³ã¯ããã³ããã¹ãã³ã³ãããŒã«ãæã€ã ããããã€ã¢ãã°èªèº«ã¯ããã®åãšããŠãããã¹ãã³ã³ãããŒã«ããã³ãã¿ã³ãæã€ã ããã

ãã®äŸã§ãã©ãŒã«ã¹ããã€ãŠã£ãžã§ããããã€ã¢ãã°ããã¯ã¹ã§ããã¹ãã³ã³ãããŒã«ã§ãã£ãå ŽåãããŒå ¥åã¯ãã°ã©ãã£ã«ã«ã·ã¹ãã ããâ ãŠã§ããã©ãŠã¶ãŒãâ¡ã¿ããâ¢ãã€ã¢ãã°ããããŠæåŸã«â£ããã¹ãã³ã³ãããŒã«ãžæµãããã
ããŒããŒãã€ãã³ãã¯ãåžžã«ãã®ãã©ãŒã«ã¹ãããèŠçŽ ã§å¯Ÿè±¡ã«ãããã
ãããã¬ãã«ãã©ããŒãµãã«ã¯ããªãã¬ãŒãã£ã³ã°ã·ã¹ãã ãããã£ãã«ãããããŒããŒãå ¥åïŒããããã¢ã¯ãã£ããªææžã®åå«ããã²ãŒãå¯èœã®1ã€ãã¿ãŒã²ããïŒãåãåãããšãã§ããå Žåãã·ã¹ãã ãã©ãŒã«ã¹ãæã€ã
ãããã¬ãã«æšªæå¯èœã¯ããã®ã·ã¹ãã å¯èŠç¶æ
ã"visible"ã§ããå Žåã ãŠãŒã¶ãŒã¢ãã³ã·ã§ã³ãæã¡ããããŠã·ã¹ãã ãã©ãŒã«ã¹ãæã€ãããŸãã¯ããã«çŽæ¥é¢é£ãããŠãŒã¶ãŒãšãŒãžã§ã³ããŠã£ãžã§ãããããªãã¬ãŒãã£ã³ã°ã·ã¹ãã ããéãããããŒããŒãå
¥åãåãåãããšãã§ãããã®ããããã§ããã
ãã©ãŠã¶ãŒãŠã£ã³ããŠããã©ãŒã«ã¹ã倱ããšããŠãŒã¶ãŒã¢ãã³ã·ã§ã³ã¯å€±ãããããäžæ¹ã§ã·ã¹ãã ã®ãã©ãŒã«ã¹ããŸãããã±ãŒã·ã§ã³ããŒãªã©ããã©ãŠã¶ãŒãŠã£ã³ããŠå ã®ä»ã®ã·ã¹ãã ãŠã£ãžã§ããã倱ãããå¯èœæ§ãããã
Document dã¯ãdãå®å
šã«ã¢ã¯ãã£ãã§ããããã€dã®ããŒãããã²ãŒãå¯èœã®ãããã¬ãã«æšªæå¯èœã« ãŠãŒã¶ãŒã¢ãã³ã·ã§ã³ãããå ŽåããŠãŒã¶ãŒã¢ãã³ã·ã§ã³ããã€ãããã¬ãã«æšªæå¯èœã®å®å
šã«ã¢ã¯ãã£ãã®åå«ã§ããã
çšèªãã©ãŒã«ã¹å¯èœé åã¯ããã®ãããªããŒããŒãå ¥åã®å¯Ÿè±¡ã«ãªãå¯èœæ§ãããã€ã³ã¿ãŒãã§ã€ã¹ã®é åãæãããã«äœ¿çšãããããã©ãŒã«ã¹å¯èœé åã¯ãèŠçŽ ãèŠçŽ ã®äžéšããŸãã¯ãŠãŒã¶ãŒãšãŒãžã§ã³ãã«ãã£ãŠåŠçãããä»ã®é åãšãªãããšãã§ããã
åãã©ãŒã«ã¹å¯èœé åã¯ãDOMã§ãã©ãŒã«ã¹å¯èœé åã®äœçœ®ã衚ãNodeãªããžã§ã¯ãã§ãããDOMã¢ã³ã«ãŒãæã€ãïŒãã©ãŒã«ã¹å¯èœé åãNodeèªèº«ã§ããå Žåãããã¯ããèªèº«ã®DOM anchorã§ãããïŒãã©ãŒã«ã¹å¯èœé åã衚ãããã«ä»ã®DOMãªããžã§ã¯ããååšããªãå ŽåãDOMã¢ã³ã«ãŒã¯ããã©ãŒã«ã¹å¯èœé åã«é©ãããããªããã€ãã®APIã§äœ¿çšãããã
次ã®ããŒãã«ã¯ãã©ã®ãªããžã§ã¯ãããã©ãŒã«ã¹å¯èœé åãšãªãããšãã§ãããã説æãããå·Šã®åã«ãããã»ã«ã¯ããã©ãŒã«ã¹å¯èœé åãšãªãããšãã§ãããªããžã§ã¯ãã説æãããå³ã®åã«ãããã»ã«ã¯ããã®èŠçŽ ã«å¯ŸããDOMã¢ã³ã«ãŒã説æãããïŒäž¡æ¹ã®åããŸããã»ã«ã¯ãéèŠç¯çãªäŸã§ãããïŒ
| ãã©ãŒã«ã¹å¯èœé å | DOMã¢ã³ã«ãŒ |
|---|---|
| äŸ | |
次ã®ãã¹ãŠã®åºæºãæºããèŠçŽ ïŒ
| èŠçŽ èªèº«ã |
| |
ã¬ã³ããªã³ã°ãããŠããããã³äžæŽ»æ§ã§ãªãimgèŠçŽ ã«é¢é£ããã€ã¡ãŒãžãããã«ãããareaèŠçŽ ã®åœ¢ç¶ã | imgèŠçŽ |
次ã®äŸã«ãããŠãããããç»åã®ã
| |
| èŠçŽ ã®ãµããŠã£ãžã§ãããæäŸããããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãã¬ã³ããªã³ã°ãããŠãããã€å®éã«ç¡å¹ãŸãã¯äžæŽ»æ§ã§ãªãã | ãã©ãŒã«ã¹å¯èœé åããµããŠã£ãžã§ãããšãªãèŠçŽ ã |
| |
| ã¬ã³ããªã³ã°ãããŠãããã€äžæŽ»æ§ã§ãªãèŠçŽ ã®ã¹ã¯ããŒã«å¯èœãªé åã | ã¹ã¯ããŒã«å¯èœãªé åã®ã¹ã¯ããŒã«ãäœæãããããã¯ã¹ã«å¯ŸããèŠçŽ |
CSS 'overflow'ããããã£ã®'scroll'å€ãå žåçã«ã¹ã¯ããŒã«å¯èœé åãäœæããã | |
énullã®ãã©ãŠãžã³ã°ã³ã³ããã¹ãããããäžæŽ»æ§ã§ã¯ãªãDocumentã®ãã¥ãŒããŒãã | ãã¥ãŒããŒããäœæãããDocumentã |
| |
| ç¹ã«ã¢ã¯ã»ã·ããªãã£ãæ¯æŽããããã«ããŸãã¯ãã©ãããã©ãŒã ã®èŠåã«ããããäžèŽãããããã«ããŠãŒã¶ãŒãšãŒãžã§ã³ãã«ãã£ãŠãã©ãŒã«ã¹å¯èœãªé åã§ãããšå€æãããä»ã®èŠçŽ ãŸãã¯èŠçŽ ã®äžéšã | èŠçŽ ã |
ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ããã¹ãŠã®ãªã¹ãã¢ã€ãã ã®ç®æ¡æžããã·ãŒã±ã³ã·ã£ã«ã«ãã©ãŒã«ã¹å¯èœã«ããŠããã®çµæãŠãŒã¶ãŒããªã¹ããããç°¡åã«ããã²ãŒãã§ããããã«ããããšãã§ããã åæ§ã«ããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ã | |
ããã²ãŒãå¯èœãªã³ã³ãããŒïŒiframeãªã©ïŒã¯ããã©ãŒã«ã¹å¯èœãªé åã§ããããããã²ãŒãå¯èœãªã³ã³ãããŒã«éãããããŒã€ãã³ãã¯ãã³ã³ãã³ãããã²ãŒãå¯èœã®ã¢ã¯ãã£ããªææžã«ããã«éãããã åæ§ã«ãã·ãŒã±ã³ã·ã£ã«ãã©ãŒã«ã¹ããã²ãŒã·ã§ã³ã«ãããŠãããã²ãŒãå¯èœãªã³ã³ãããŒã¯åºæ¬çã«ãã³ã³ãã³ãããã²ãŒãå¯èœã®ã¢ã¯ãã£ãææžã®ãã¬ãŒã¹ãã«ããŒãšããŠã®ã¿æ©èœããã
åDocumentã®1ã€ã®ãã©ãŒã«ã¹å¯èœãªé åã¯ãææžã®ãã©ãŒã«ã¹ãããé åãšããŠæå®ããããã©ã®ã³ã³ãããŒã«ããã®ããã«åŒã°ãããã¯æéãšãšãã«å€åãããã®ä»æ§ã«ãããã¢ã«ãŽãªãºã ã«åºã¥ãã
ããšãææžãå®å šã«ã¢ã¯ãã£ãã§ãªããã€ãŠãŒã¶ãŒã«è¡šç€ºãããªããšããŠããææžã®ãã©ãŒã«ã¹ãããé åãä¿æã§ãããææžã®å®å šã«ã¢ã¯ãã£ããªç¶æ ãå€åããŠããææžã®ãã©ãŒã«ã¹ãããé åã¯åããŸãŸãšãªãã
The currently focused area of a top-level traversable traversable is the focusable area-or-null returned by this algorithm:
If traversable does not have system focus, then return null.
Let candidate be traversable's active document.
While candidate's focused area is a navigable container with a non-null content navigable: set candidate to the active document of that navigable container's content navigable.
If candidate's focused area is non-null, set candidate to candidate's focused area.
candidateãè¿ãã
The current focus chain of a top-level traversable traversable is the focus chain of the currently focused area of traversable, if traversable is non-null, or an empty list otherwise.
An element that is the DOM anchor of a focusable area is said to gain focus when that focusable area becomes the currently focused area of a top-level traversable. When an element is the DOM anchor of a focusable area of the currently focused area of a top-level traversable, it is focused.
The focus chain of a focusable area subject is the ordered list constructed as follows:
Let output be an empty list.
Let currentObject be subject.
While true:
Append currentObject to output.
If currentObject is an area element's shape, then append that area element to output.
Otherwise, if currentObject's DOM anchor is an element that is not currentObject itself, then append currentObject's DOM anchor to output.
If currentObject is a focusable area, then set currentObject to currentObject's DOM anchor's node document.
Otherwise, if currentObject is a Document whose node navigable's parent is non-null, then set currentObject to currentObject's node navigable's parent.
Otherwise, break.
Return output.
The chain starts with subject and (if subject is or can be the currently focused area of a top-level traversable) continues up the focus hierarchy up to the Document of the top-level traversable.
All elements that are focusable areas are said to be focusable.
There are two special types of focusability for focusable areas:
A focusable area is said to be sequentially focusable if it is included in its Document's sequential focus navigation order and the user agent determines that it is sequentially focusable.
A focusable area is said to be click focusable if the user agent determines that it is click focusable. User agents should consider focusable areas with non-null tabindex values to be click focusable.
Elements which are not focusable are not focusable areas, and thus not sequentially focusable and not click focusable.
Being focusable is a statement about whether an element can be focused programmatically, e.g. via the focus() method or autofocus attribute. In contrast, sequentially focusable and click focusable govern how the user agent responds to user interaction: respectively, to sequential focus navigation and as activation behavior.
The user agent might determine that an element is not sequentially focusable even if it is focusable and is included in its Document's sequential focus navigation order, according to user preferences. For example, macOS users can set the user agent to skip non-form control elements, or can skip links when doing sequential focus navigation with just the Tab key (as opposed to using both the Option and Tab keys).
Similarly, the user agent might determine that an element is not click focusable even if it is focusable. For example, in some user agents, clicking on a non-editable form control does not focus it, i.e. the user agent has determined that such controls are not click focusable.
Thus, an element can be focusable, but neither sequentially focusable nor click focusable. For example, in some user agents, a non-editable form-control with a negative-integer tabindex value would not be focusable via user interaction, only via programmatic APIs.
When a user activates a click focusable focusable area, the user agent must run the focusing steps on the focusable area with focus trigger set to "click".
Note that focusing is not an activation behavior, i.e. calling the click() method on an element or dispatching a synthetic click event on it won't cause the element to get focused.
A node is a focus navigation scope owner if it is a Document, a shadow host, a slot, or an element which is the popover trigger of an element in the popover showing state.
Each focus navigation scope owner has a focus navigation scope, which is a list of elements. Its contents are determined as follows:
Every element element has an associated focus navigation owner, which is either null or a focus navigation scope owner. It is determined by the following algorithm:
If element's parent is null, then return null.
If element's parent is a shadow host, then return element's assigned slot.
If element's parent is a shadow root, then return the parent's host.
If element's parent is the document element, then return the parent's node document.
If element is in the popover showing state and has a popover trigger set, then return element's popover trigger.
Return element's parent's associated focus navigation owner.
Then, the contents of a given focus navigation scope owner owner's focus navigation scope are all elements whose associated focus navigation owner is owner.
The order of elements within a focus navigation scope does not impact any of the algorithms in this specification. Ordering only becomes important for the tabindex-ordered focus navigation scope and flattened tabindex-ordered focus navigation scope concepts defined below.
A tabindex-ordered focus navigation scope is a list of focusable areas and focus navigation scope owners. Every focus navigation scope owner owner has tabindex-ordered focus navigation scope, whose contents are determined as follows:
It contains all elements in owner's focus navigation scope that are themselves focus navigation scope owners, except the elements whose tabindex value is a negative integer.
It contains all of the focusable areas whose DOM anchor is an element in owner's focus navigation scope, except the focusable areas whose tabindex value is a negative integer.
The order within a tabindex-ordered focus navigation scope is determined by each element's tabindex value, as described in the section below.
The rules there do not give a precise ordering, as they are composed mostly of "should" statements and relative orderings.
A flattened tabindex-ordered focus navigation scope is a list of focusable areas. Every focus navigation scope owner owner owns a distinct flattened tabindex-ordered focus navigation scope, whose contents are determined by the following algorithm:
Let result be a clone of owner's tabindex-ordered focus navigation scope.
For each item of result:
If item is not a focus navigation scope owner, then continue.
If item is not a focusable area, then replace item with all of the items in item's flattened tabindex-ordered focus navigation scope.
Otherwise, insert the contents of item's flattened tabindex-ordered focus navigation scope after item.
tabindex屿§Support in all current engines.
tabindexã³ã³ãã³ã屿§ã¯ãèè
ããDOMã¢ã³ã«ãŒãšããŠèŠçŽ ãæã€èŠçŽ ããã³é åããã©ãŒã«ã¹å¯èœé åã«ãããã·ãŒã±ã³ã·ã£ã«ãã©ãŒã«ã¹å¯èœã«ããããšãèš±å¯ãŸãã¯é²æ¢ããããªãã³ã«ã·ãŒã±ã³ã·ã£ã«ãã©ãŒã«ã¹ããã²ãŒã·ã§ã³ã®çžå¯Ÿçãªé åºã決å®ããããšãå¯èœã«ããã
åå"tab index"ã¯ããã©ãŒã«ã¹å¯èœãªèŠçŽ ãéããŠããã²ãŒãããããã®TabããŒã®äžè¬çãªäœ¿ç𿹿³ã«ç±æ¥ããã"tabbing"ïŒã¿ãç§»åïŒãšããçšèªã¯ãã·ãŒã±ã³ã·ã£ã«ãã©ãŒã«ã¹å¯èœãªãã©ãŒã«ã¹å¯èœé åãåã«é²ããããšãæãã
tabindex屿§ãæå®ãããå Žåã劥åœãªæŽæ°ã§ããå€ãæããªããã°ãªããªããæ£ã®æ°å€ã¯ãèŠçŽ ã®ãã©ãŒã«ã¹å¯èœé åã®çžå¯Ÿçãªäœçœ®ãã·ãŒã±ã³ã·ã£ã«ãã©ãŒã«ã¹ããã²ãŒã·ã§ã³é åºã§æå®ããè² ã®æ°å€ã¯ã³ã³ãããŒã«ãã·ãŒã±ã³ã·ã£ã«ãã©ãŒã«ã¹å¯èœã§ãªãããšã瀺ãã
0ãŸãã¯-1以å€ã®å€ã䜿çšããŠããå Žåãéçºè
ã¯ããããæ£ããè¡ãããã«è€éã«ãªããããèªèº«ã®tabindex屿§ã«å¯ŸããŠçšå¿ãã¹ãã§ããã
次ã¯ãå¯èœãªtabindex屿§å€ã®åäœã®éèŠç¯çãªæŠèŠãæäŸãããäžèšã®åŠçã¢ãã«ã¯ãããæ£ç¢ºãªèŠåãäžããã
tabindex屿§å€ããã倧ããèŠçŽ ã¯åŸããæ¥ããtabindex屿§ã¯ãèŠçŽ ããã©ãŒã«ã¹äžå¯ã«ããããã«äœ¿çšã§ããªãããšã«æ³šæãããããŒãžèè
ãã§ããå¯äžã®æ¹æ³ã¯ãèŠçŽ ãç¡å¹ã«ããããŸãã¯èŠçŽ ãäžæŽ»æ§ã«ããããšã§ããã
The tabindex value of an element is the value of its tabindex attribute, parsed using the rules for parsing integers. If parsing fails or the attribute is not specified, then the tabindex value is null.
The tabindex value of a focusable area is the tabindex value of its DOM anchor.
The tabindex value of an element must be interpreted as follows:
The user agent should follow platform conventions to determine if the element should be considered as a focusable area and if so, whether the element and any focusable areas that have the element as their DOM anchor are sequentially focusable, and if so, what their relative position in their tabindex-ordered focus navigation scope is to be. If the element is a focus navigation scope owner, it must be included in its tabindex-ordered focus navigation scope even if it is not a focusable area.
The relative ordering within a tabindex-ordered focus navigation scope for elements and focusable areas that belong to the same focus navigation scope and whose tabindex value is null should be in shadow-including tree order.
Modulo platform conventions, it is suggested that the following elements should be considered as focusable areas and be sequentially focusable:
a elements that have an href attributebutton elementsinput elements whose type attribute are not in the stateselectèŠçŽ textareaèŠçŽ summary elements that are the first summary element child of a details elementdraggable attribute set, if that would enable the user agent to allow the user to begin drag operations for those elements without the use of a pointing deviceThe user agent must consider the element as a focusable area, but should omit the element from any tabindex-ordered focus navigation scope.
One valid reason to ignore the requirement that sequential focus navigation not allow the author to lead to the element would be if the user's only mechanism for moving the focus is sequential focus navigation. For instance, a keyboard-only user would be unable to click on a text control with a negative tabindex, so that user's user agent would be well justified in allowing the user to tab to the control regardless.
The user agent must allow the element to be considered as a focusable area and should allow the element and any focusable areas that have the element as their DOM anchor to be sequentially focusable.
The relative ordering within a tabindex-ordered focus navigation scope for elements and focusable areas that belong to the same focus navigation scope and whose tabindex value is zero should be in shadow-including tree order.
The user agent must allow the element to be considered as a focusable area and should allow the element and any focusable areas that have the element as their DOM anchor to be sequentially focusable, and should place the element â referenced as candidate below â and the aforementioned focusable areas in the tabindex-ordered focus navigation scope where the element is a part of so that, relative to other elements and focusable areas that belong to the same focus navigation scope, they are:
tabindex attribute has been omitted or whose value, when parsed, returns an error,tabindex attribute has a value less than or equal to zero,tabindex attribute has a value greater than zero but less than the value of the tabindex attribute on candidate,tabindex attribute has a value equal to the value of the tabindex attribute on candidate but that is located earlier than candidate in shadow-including tree order,tabindex attribute has a value equal to the value of the tabindex attribute on candidate but that is located later than candidate in shadow-including tree order, andtabindex attribute has a value greater than the value of the tabindex attribute on candidate.Support in all current engines.
The tabIndex getter steps are:
If attribute is not null:
Let parsedValue be the result of integer parsing attribute's value.
If parsedValue is not an error and is within the long range, then return parsedValue.
Return 0 if this is an a, area, button, frame, iframe, input, object, select, textarea, or SVG a element, or MathML a element, or is a summary element that is a summary for its parent details; otherwise â1.
The varying default value based on element type is a historical artifact.
To get the focusable area for a focus target that is either an element that is not a focusable area, or is a navigable, given an optional string focus trigger (default "other"), run the first matching set of steps from the following list:
area element with one or more shapes that are focusable areasReturn the shape corresponding to the first img element in tree order that uses the image map to which the area element belongs.
Return the element's first scrollable region, according to a pre-order, depth-first traversal of the flat tree. [CSSSCOPING]
DocumentReturn the navigable's active document.
Return the navigable container's content navigable's active document.
Let focusedElement be the currently focused area of a top-level traversable's DOM anchor.
If focus target is a shadow-including inclusive ancestor of focusedElement, then return focusedElement.
Return the focus delegate for focus target given focus trigger.
For sequential focusability, the handling of shadow hosts and delegates focus is done when constructing the sequential focus navigation order. That is, the focusing steps will never be called on such shadow hosts as part of sequential focus navigation.
Return null.
The focus delegate for a focusTarget, given an optional string focusTrigger (default "other"), is given by the following steps:
If focusTarget is a shadow host and its shadow root's delegates focus is false, then return null.
Let whereToLook be focusTarget.
If whereToLook is a shadow host, then set whereToLook to whereToLook's shadow root.
Let autofocusDelegate be the autofocus delegate for whereToLook given focusTrigger.
If autofocusDelegate is not null, then return autofocusDelegate.
For each descendant of whereToLook's descendants, in tree order:
Let focusableArea be null.
If focusTarget is a dialog element and descendant is sequentially focusable, then set focusableArea to descendant.
Otherwise, if focusTarget is not a dialog and descendant is a focusable area, set focusableArea to descendant.
Otherwise, set focusableArea to the result of getting the focusable area for descendant given focusTrigger.
This step can end up recursing, i.e., the get the focusable area steps might return the focus delegate of descendant.
If focusableArea is not null, then return focusableArea.
It's important that we are not looking at the shadow-including descendants here, but instead only at the descendants. Shadow hosts are instead handled by the recursive case mentioned above.
Return null.
The above algorithm essentially returns the first suitable focusable area where the path between its DOM anchor and focusTarget delegates focus at any shadow tree boundaries.
The autofocus delegate for a focus target given a focus trigger is given by the following steps:
For each descendant descendant of focus target, in tree order:
If descendant does not have an autofocus content attribute, then continue.
Let focusable area be descendant, if descendant is a focusable area; otherwise let focusable area be the result of getting the focusable area for descendant given focus trigger.
If focusable area is null, then continue.
If focusable area is not click focusable and focus trigger is "click", then continue.
Return focusable area.
Return null.
The focusing steps for an object new focus target that is either a focusable area, or an element that is not a focusable area, or a navigable, are as follows. They can optionally be run with a fallback target and a string focus trigger.
If new focus target is not a focusable area, then set new focus target to the result of getting the focusable area for new focus target, given focus trigger if it was passed.
If new focus target is null:
If no fallback target was specified, then return.
Otherwise, set new focus target to the fallback target.
If new focus target is a navigable container with non-null content navigable, then set new focus target to the content navigable's active document.
If new focus target is a focusable area and its DOM anchor is inert, then return.
If new focus target is the currently focused area of a top-level traversable, then return.
Let old chain be the current focus chain of the top-level traversable in which new focus target finds itself.
Let new chain be the focus chain of new focus target.
Run the focus update steps with old chain, new chain, and new focus target respectively.
User agents must immediately run the focusing steps for a focusable area or navigable candidate whenever the user attempts to move the focus to candidate.
The unfocusing steps for an object old focus target that is either a focusable area or an element that is not a focusable area are as follows:
If old focus target is a shadow host whose shadow root's delegates focus is true, and old focus target's shadow root is a shadow-including inclusive ancestor of the currently focused area of a top-level traversable's DOM anchor, then set old focus target to that currently focused area of a top-level traversable.
If old focus target is inert, then return.
If old focus target is an area element and one of its shapes is the currently focused area of a top-level traversable, or, if old focus target is an element with one or more scrollable regions, and one of them is the currently focused area of a top-level traversable, then let old focus target be that currently focused area of a top-level traversable.
Let old chain be the current focus chain of the top-level traversable in which old focus target finds itself.
If old focus target is not one of the entries in old chain, then return.
If old focus target is not a focusable area, then return.
Let topDocument be old chain's last entry.
If topDocument's node navigable has system focus, then run the focusing steps for topDocument's viewport.
Otherwise, apply any relevant platform-specific conventions for removing system focus from topDocument's node navigable, and run the focus update steps given old chain, an empty list, and null.
The unfocusing steps do not always result in the focus changing, even when applied to the currently focused area of a top-level traversable. For example, if the currently focused area of a top-level traversable is a viewport, then it will usually keep its focus regardless until another focusable area is explicitly focused with the focusing steps.
The focus update steps, given an old chain, a new chain, and a new focus target respectively, are as follows:
If the last entry in old chain and the last entry in new chain are the same, pop the last entry from old chain and the last entry from new chain and redo this step.
For each entry entry in old chain, in order, run these substeps:
If entry is an input element, and the change event applies to the element, and the element does not have a defined activation behavior, and the user has changed the element's value or its list of selected files while the control was focused without committing that change (such that it is different to what it was when the control was first focused):
Set entry's user validity to true.
Fire an event named change at the element, with the bubbles attribute initialized to true.
If entry is an element, let blur event target be entry.
If entry is a Document object, let blur event target be that Document object's relevant global object.
Otherwise, let blur event target be null.
If entry is the last entry in old chain, and entry is an Element, and the last entry in new chain is also an Element, then let related blur target be the last entry in new chain. Otherwise, let related blur target be null.
If blur event target is not null, fire a focus event named blur at blur event target, with related blur target as the related target.
In some cases, e.g., if entry is an area element's shape, a scrollable region, or a viewport, no event is fired.
Apply any relevant platform-specific conventions for focusing new focus target. (For example, some platforms select the contents of a text control when that control is focused.)
For each entry entry in new chain, in reverse order, run these substeps:
If entry is a focusable area, and the focused area of the document is not entry:
Set document's relevant global object's navigation API's focus changed during ongoing navigation to true.
Designate entry as the focused area of the document.
If entry is an element, let focus event target be entry.
If entry is a Document object, let focus event target be that Document object's relevant global object.
Otherwise, let focus event target be null.
If entry is the last entry in new chain, and entry is an Element, and the last entry in old chain is also an Element, then let related focus target be the last entry in old chain. Otherwise, let related focus target be null.
If focus event target is not null, fire a focus event named focus at focus event target, with related focus target as the related target.
In some cases, e.g. if entry is an area element's shape, a scrollable region, or a viewport, no event is fired.
To fire a focus event named e at an element t with a given related target r, fire an event named e at t, using FocusEvent, with the relatedTarget attribute initialized to r, the view attribute initialized to t's node document's relevant global object, and the composed flag set.
When a key event is to be routed in a top-level traversable, the user agent must run the following steps:
Let target area be the currently focused area of the top-level traversable.
Assert: target area is not null, since key events are only routed to top-level traversables that have system focus. Therefore, target area is a focusable area.
Let target node be target area's DOM anchor.
If target node is a Document that has a body element, then let target node be the body element of that Document.
Otherwise, if target node is a Document object that has a non-null document element, then let target node be that document element.
If target node is not inert:
Let canHandle be the result of dispatching the key event at target node.
If canHandle is true, then let target area handle the key event. This might include firing a click event at target node.
The has focus steps, given a Document object target, are as follows:
If target's node navigable's top-level traversable does not have system focus, then return false.
Let candidate be target's node navigable's top-level traversable's active document.
While true:
If candidate is target, then return true.
If the focused area of candidate is a navigable container with a non-null content navigable, then set candidate to the active document of that navigable container's content navigable.
Otherwise, return false.
Each Document has a sequential focus navigation order, which orders some or all of the focusable areas in the Document relative to each other. Its contents and ordering are given by the flattened tabindex-ordered focus navigation scope of the Document.
Per the rules defining the flattened tabindex-ordered focus navigation scope, the ordering is not necessarily related to the tree order of the Document.
If a focusable area is omitted from the sequential focus navigation order of its Document, then it is unreachable via sequential focus navigation.
There can also be a sequential focus navigation starting point. It is initially unset. The user agent may set it when the user indicates that it should be moved.
For example, the user agent could set it to the position of the user's click if the user clicks on the document contents.
User agents are required to set the sequential focus navigation starting point to the target element when navigating to a fragment.
A sequential focus direction is one of two possible values: "forward", or "backward". They are used in the below algorithms to describe the direction in which sequential focus travels at the user's request.
A selection mechanism is one of two possible values: "DOM", or "sequential". They are used to describe how the sequential navigation search algorithm finds the focusable area it returns.
When the user requests that focus move from the currently focused area of a top-level traversable to the next or previous focusable area (e.g., as the default action of pressing the tab key), or when the user requests that focus sequentially move to a top-level traversable in the first place (e.g., from the browser's location bar), the user agent must use the following algorithm:
Let starting point be the currently focused area of a top-level traversable, if the user requested to move focus sequentially from there, or else the top-level traversable itself, if the user instead requested to move focus from outside the top-level traversable.
If there is a sequential focus navigation starting point defined and it is inside starting point, then let starting point be the sequential focus navigation starting point instead.
Let direction be "forward" if the user requested the next control, and "backward" if the user requested the previous control.
Typically, pressing tab requests the next control, and pressing shift + tab requests the previous control.
Loop: Let selection mechanism be "sequential" if starting point is a navigable or if starting point is in its Document's sequential focus navigation order.
Otherwise, starting point is not in its Document's sequential focus navigation order; let selection mechanism be "DOM".
Let candidate be the result of running the sequential navigation search algorithm with starting point, direction, and selection mechanism.
If candidate is not null, then run the focusing steps for candidate and return.
Otherwise, unset the sequential focus navigation starting point.
If starting point is a top-level traversable, or a focusable area in the top-level traversable, the user agent should transfer focus to its own controls appropriately (if any), honouring direction, and then return.
For example, if direction is backward, then the last sequentially focusable control before the browser's rendering area would be the control to focus.
If the user agent has no sequentially focusable controls â a kiosk-mode browser, for instance â then the user agent may instead restart these steps with the starting point being the top-level traversable itself.
Otherwise, starting point is a focusable area in a child navigable. Set starting point to that child navigable's parent and return to the step labeled loop.
The sequential navigation search algorithm, given a focusable area starting point, sequential focus direction direction, and selection mechanism selection mechanism, consists of the following steps. They return a focusable area-or-null.
Pick the appropriate cell from the following table, and follow the instructions in that cell.
The appropriate cell is the one that is from the column whose header describes direction and from the first row whose header describes starting point and selection mechanism.
direction is "forward" | direction is "backward" | |
|---|---|---|
| starting point is a navigable | Let candidate be the first suitable sequentially focusable area in starting point's active document, if any; or else null. | Let candidate be the last suitable sequentially focusable area in starting point's active document, if any; or else null. |
selection mechanism is "DOM" | Let candidate be the suitable sequentially focusable area, that appears nearest after starting point in starting point's In this case, starting point does not necessarily belong to its | Let candidate be the suitable sequentially focusable area, that appears nearest before starting point in starting point's Document, in shadow-including tree order, if any; or else null. |
selection mechanism is "sequential" | Let candidate be the first suitable sequentially focusable area after starting point, in starting point's Document's sequential focus navigation order, if any; or else null. | Let candidate be the last suitable sequentially focusable area before starting point, in starting point's Document's sequential focus navigation order, if any; or else null. |
A suitable sequentially focusable area is a focusable area whose DOM anchor is not inert and is sequentially focusable.
If candidate is a navigable container with a non-null content navigable:
Let recursive candidate be the result of running the sequential navigation search algorithm with candidate's content navigable, direction, and "sequential".
If recursive candidate is null, then return the result of running the sequential navigation search algorithm with candidate, direction, and selection mechanism.
Otherwise, set candidate to recursive candidate.
candidateãè¿ãã
dictionary FocusOptions {
boolean preventScroll = false ;
boolean focusVisible ;
};
documentOrShadowRoot.activeElementSupport in all current engines.
Support in all current engines.
ããŒã€ãã³ããã«ãŒãã£ã³ã°ãããdocumentOrShadowRootå ã®æãæ·±ãèŠçŽ ãè¿ãã倧ãŸãã«ãã£ãŠãããã¯ææžã«ããããã©ãŒã«ã¹ãããèŠçŽ ã§ããã
ãã®APIããã«ãåããã²ãŒãå¯èœããã©ãŒã«ã¹ããããšãããã®ã³ã³ãããŒã¯èŠªã®ã¢ã¯ãã£ããªææžå
ã§ãã©ãŒã«ã¹ãããã ããšãã°ããŠãŒã¶ãŒãiframeã§ãã©ãŒã«ã¹ãããã¹ãã³ã³ãããŒã«ã«ç§»åããå Žåãiframeã¯iframeã®node documentã«ãããŠactiveElement APIã«ãã£ãŠè¿ãããèŠçŽ ã§ããã
åæ§ã«ããã©ãŒã«ã¹ãããèŠçŽ ãdocumentOrShadowRootãšã¯ç°ãªãããŒãããªãŒã«ãããšããdocumentOrShadowRootããã©ãŒã«ã¹ãããèŠçŽ ã®ã·ã£ããŠãå«ãå å«ç¥å ã§ããå Žåãè¿ãããèŠçŽ ã¯documentOrShadowRootãšåãããŒãããªãŒã«ãããã¹ãã«ãªããããã§ãªãå Žåã¯nullã«ãªãã
document.hasFocus()Support in all current engines.
ããŒã€ãã³ããdocumentãçµç±ãŸãã¯ã«ãŒãã£ã³ã°ãããŠããå Žåã¯trueãè¿ããããã§ãªããã°falseãè¿ãã倧ãŸãã«ãã£ãŠãããã¯ãã©ãŒã«ã¹ãããŠããdocumentããŸãã¯documentå ã«ãã¹ããããææžã«å¯Ÿå¿ããã
window.focus()Support in all current engines.
windowã®ããã²ãŒãå¯èœãªãã©ãŒã«ã¹ãç§»åããã
element.focus()Support in all current engines.
element.focus({ preventScroll, focusVisible })ãã©ãŒã«ã¹ãelementã«ç§»åããã
elementãããã²ãŒãå¯èœãªããã¹ãã³ã³ãããŒã§ããå Žåã代ããã«ããã²ãŒãå¯èœãªã³ã³ãã³ãã«ãã©ãŒã«ã¹ãç§»åããã
ããã©ã«ãã§ã¯ããã®ã¡ãœãããelementããã¥ãŒã«ã¹ã¯ããŒã«ãããpreventScrollãªãã·ã§ã³ãæå®ããŠtrueã«èšå®ãããšããã®åäœã鲿¢ãããã
ããã©ã«ãã§ã¯ããŠãŒã¶ãŒãšãŒãžã§ã³ãå®è£
ã§å®çŸ©ããããã¥ãŒãªã¹ãã£ãã¯ã䜿çšããŠããã©ãŒã«ã¹ãªã³ã°ãä»ããŠãã©ãŒã«ã¹ã瀺ããã©ãããæ±ºå®ãããfocusVisibleãªãã·ã§ã³ãæå®ããŠtrueã«èšå®ãããšããã©ãŒã«ã¹ãªã³ã°ãåžžã«è¡šç€ºãããã
element.blur()Support in all current engines.
ãã©ãŒã«ã¹ããã¥ãŒããŒãã«ç§»åããããã®ã¡ãœããã®äœ¿çšã¯å¥šããããªãããã¥ãŒããŒãã«ãã©ãŒã«ã¹ãããå ŽåãDocumentã®ææžèŠçŽ äžã®focus()ã¡ãœãããåŒã³åºãã
èŠèŠãããã©ãŒã«ã¹ãªã³ã°ãçºèŠããå Žåããã©ãŒã«ã¹ãªã³ã°ãé衚瀺ã«ããããã«ãã®æ¹æ³ã䜿çšããŠã¯ãªããªãã代ããã«ã'outline'ããããã£ãäžæžãããããã«:focus-visibleç䌌ã¯ã©ã¹ã䜿çšããèŠçŽ ããã©ãŒã«ã¹ããããã®ã衚瀺ããå¥ã®æ¹æ³ãæäŸããã代æ¿ãã©ãŒã«ã¹ã¹ã¿ã€ã«ãå©çšå¯èœã«ãªããªãããããŒãžãäž»ã«ããŒããŒãã䜿çšããŠããŒãžãããã²ãŒããã人ã«å¯ŸããŠèãã䜿çšå¯èœã«ãªããªãããããŒãžãããã²ãŒãããã®ã«åœ¹ç«ã€ãã©ãŒã«ã¹ã¢ãŠãã©ã€ã³ã䜿ã人ã®èŠèŠãæžå°ãããªããã©ããã«æ³šæããã
ããšãã°ãtextareaèŠçŽ ããã¢ãŠãã©ã€ã³ãé ãã代ããã«ãã©ãŒã«ã¹ã瀺ãããã«é»è²ã®èæ¯ã䜿çšããããã«ã次ã䜿ãããšãã§ããïŒ
textarea:focus-visible { outline : none; background : yellow; color : black; }
The DocumentOrShadowRoot activeElement getter steps are:
Let candidate be this's node document's focused area's DOM anchor.
Set candidate to the result of retargeting candidate against this.
If candidate is not a Document object, then return candidate.
If candidate has a body element, then return that body element.
If candidate's document element is non-null, then return that document element.
Return null.
The Document hasFocus() method steps are to return the result of running the has focus steps given this.
The Window focus() method steps are:
If current is null, then return.
If the allow focus steps given current's active document return false, then return.
Run the focusing steps with current.
If current is a top-level traversable, user agents are encouraged to trigger some sort of notification to indicate to the user that the page is attempting to gain focus.
Support in all current engines.
The Window blur() method steps are to do nothing.
Historically, the focus() and blur() methods actually affected the system-level focus of the system widget (e.g., tab or window) that contained the navigable, but hostile sites widely abuse this behavior to the user's detriment.
The HTMLOrSVGOrMathMLElement focus(options) method steps are:
If the allow focus steps given this's node document return false, then return.
Run the focusing steps for this.
If options["focusVisible"] is true, or does not exist but in an implementation-defined way the user agent determines it would be best to do so, then indicate focus.
If options["preventScroll"] is false, then scroll a target into view given this, "auto", "center", and "center".
The HTMLOrSVGOrMathMLElement blur() method steps are:
The user agent should run the unfocusing steps given this.
User agents may instead selectively or uniformly do nothing, for usability reasons.
For example, if the blur() method is unwisely being used to remove the focus ring for aesthetics reasons, the page would become unusable by keyboard users. Ignoring calls to this method would thus allow keyboard users to interact with the page.
The allow focus steps, given a Document object target, are:
If target is allowed to use the "focus-without-user-activation" feature, then return true.
If target's relevant global object has transient activation, then return true.
falseãè¿ãã
autofocus屿§autofocusã³ã³ãã³ã屿§ã¯ãèè
ã«ããŒãžãããŒãããããšããã«èŠçŽ ã«ãã©ãŒã«ã¹ãããããšã瀺ãã®ãå¯èœã«ãããŠãŒã¶ãŒã¯éèŠãªèŠçŽ ã«æåã§ãã©ãŒã«ã¹ããããšãªãå
¥åãéå§ã§ããã
popover屿§ãèšå®ãããŠããdialogèŠçŽ ãŸãã¯HTMLèŠçŽ å
éšã®èŠçŽ ã«autofocus屿§ãæå®ãããå Žåããã€ã¢ãã°ãŸãã¯ããããªãŒããŒã衚瀺ããããšãã«ãã©ãŒã«ã¹ãããã
autofocus屿§ã¯çåœå±æ§ã§ããã
To find the nearest ancestor autofocus scoping root element given an Element element:
If element is a dialog element, then return element.
If element's popover attribute is not in the No Popover state, then return element.
Let ancestor be element.
While ancestor has a parent element:
Set ancestor to ancestor's parent element.
If ancestor is a dialog element, then return ancestor.
If ancestor's popover attribute is not in the No Popover state, then return ancestor.
Return ancestor.
äž¡æ¹ãautofocus屿§ãæå®ãããåãçŽè¿ã®ç¥å
ãªãŒããã©ãŒã«ã¹ç¯å²ã®ã«ãŒãèŠçŽ ããã€2ã€ã®èŠçŽ ãååšããŠã¯ãªããªãã
Each Document has an autofocus candidates list, initially empty.
Each Document has an autofocus processed flag boolean, initially false.
When an element with the autofocus attribute specified is inserted into a document, run the following steps:
If the user has indicated (for example, by starting to type in a form control) that they do not wish focus to be changed, then optionally return.
Let target be the element's node document.
If target is not fully active, then return.
If target's active sandboxing flag set has the sandboxed automatic features browsing context flag, then return.
If the allow focus steps given target return false, then return.
Let topDocument be target's node navigable's top-level traversable's active document.
If topDocument's autofocus processed flag is false, then remove the element from topDocument's autofocus candidates, and append the element to topDocument's autofocus candidates.
We do not check if an element is a focusable area before storing it in the autofocus candidates list, because even if it is not a focusable area when it is inserted, it could become one by the time flush autofocus candidates sees it.
To flush autofocus candidates for a document topDocument, run these steps:
If topDocument's autofocus processed flag is true, then return.
Let candidates be topDocument's autofocus candidates.
If candidates is empty, then return.
If topDocument's focused area is not topDocument itself, or topDocument has non-null target element:
Empty candidates.
Set topDocument's autofocus processed flag to true.
Return.
While candidates is not empty:
Let element be candidates[0].
Let doc be element's node document.
If doc is not fully active, then remove element from candidates, and continue.
If doc's node navigable's top-level traversable is not the same as topDocument's node navigable, then remove element from candidates, and continue.
If doc's script-blocking style sheet set is not empty, then return.
In this case, element is the currently-best candidate, but doc is not ready for autofocusing. We'll try again next time flush autofocus candidates is called.
Remove element from candidates.
Let inclusiveAncestorDocuments be a list consisting of the active document of doc's inclusive ancestor navigables.
If any Document in inclusiveAncestorDocuments has non-null target element, then continue.
Let target be element.
If target is not a focusable area, then set target to the result of getting the focusable area for target.
Autofocus candidates can contain elements which are not focusable areas. In addition to the special cases handled in the get the focusable area algorithm, this can happen because a non-focusable area element with an autofocus attribute was inserted into a document and it never became focusable, or because the element was focusable but its status changed while it was stored in autofocus candidates.
If target is not null:
Empty candidates.
Set topDocument's autofocus processed flag to true.
Run the focusing steps for target.
This handles the automatic focusing during document load. The show() and showModal() methods of dialog elements also processes the autofocus attribute.
Focusing the element does not imply that the user agent has to focus the browser window if it has lost focus.
æ¬¡ã®æçã«ãããŠãææžãèªã¿èŸŒãŸãããšããããã¹ãã³ã³ãããŒã«ã«ãã©ãŒã«ã¹ãããã
< input maxlength = "256" name = "q" value = "" autofocus >
< input type = "submit" value = "Search" >
autofocus屿§ã¯ããã©ãŒã ã³ã³ãããŒã«ã ãã§ãªãããã¹ãŠã®èŠçŽ ã«é©çšãããã ããã«ãããæ¬¡ã®ãããªäŸãå¯èœã«ãªãïŒ
< div contenteditable autofocus > Edit < strong > me!</ strong >< div >
ãã®ç¯ã¯éèŠç¯çã§ããã
ã¢ã¯ãã£ãã«ããããŸãã¯ãã©ãŒã«ã¹ãããããšãã§ããåèŠçŽ ã¯accesskey屿§ã䜿çšããŠããããã¢ã¯ãã£ãã«ããããã®åäžã®ããŒã®çµã¿åãããå²ãåœãŠãããšãã§ããã
æ£ç¢ºãªã·ã§ãŒãã«ããã¯ããŠãŒã¶ãŒãšãŒãžã§ã³ãã«ãã£ãŠæ±ºå®ããããŠãŒã¶ãŒã®ããŒããŒãã«é¢ããæ
å ±ã«åºã¥ããã©ã®ããŒããŒãã·ã§ãŒãã«ãããæ¢ã«ãã©ãããã©ãŒã äžã«ååšããä»ã«ã©ã®ãããªã·ã§ãŒãã«ãããããŒãžäžã§æå®ãããã¬ã€ããšããŠaccesskey屿§ã«æäŸãããæ
å ±ã䜿çšããã
é¢é£ããããŒããŒãã·ã§ãŒãã«ãããå€çš®å€æ§ãªå
¥åããã€ã¹ã§å©çšå¯èœã§ããããšã確å®ã«ããããã«ãèè
ã¯accesskey屿§ã§å€æ°ã®éžæè¢ãæäŸã§ããã
åéžæè¢ã¯ãæåãŸãã¯æ°åã®ãããªãåäžã®æåã§æ§æãããã
ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãããŒããŒãã·ã§ãŒãã«ããã®äžèЧããŠãŒã¶ãŒã«æäŸã§ããããèè
ã¯è¡ãããšãæšå¥šããããaccessKeyLabel IDL屿§ã¯ããŠãŒã¶ãŒãšãŒãžã§ã³ãã«ãã£ãŠå²ãåœãŠãããå®éã®ããŒã®çµã¿åããã衚ãæååãè¿ãã
ãã®äŸã«ãããŠãèè ã¯ã·ã§ãŒãã«ããããŒã䜿çšããŠåŒã³åºãããšãã§ãããã¿ã³ãæäŸããŠããããã«ããŒããŒãããµããŒãããããã«ãèè ã¯å¯èœãªããŒãšããŠ"C"ãæäŸããŠããããã³ããŒã®ã¿ãæèŒããããã€ã¹ããµããŒãããããã«ãèè ã¯å¥ã®å¯èœãªããŒãšããŠ"1"ãæäŸããŠããã
< input type = button value = Collect onclick = "collect()"
accesskey = "C 1" id = c >
To tell the user what the shortcut key is, the author has here opted to explicitly add the key combination to the button's label:
function addShortcutKeyLabel( button) {
if ( button. accessKeyLabel != '' )
button. value += ' (' + button. accessKeyLabel + ')' ;
}
addShortcutKeyLabel( document. getElementById( 'c' ));
ç°ãªããã©ãããã©ãŒã äžã®ãã©ãŠã¶ãŒã¯ãããšãåãããŒã®çµã¿åããã§ãã£ãŠãããã®ãã©ãããã©ãŒã äžã§æ®åããŠããèŠåã«åºã¥ããŠç°ãªãã©ãã«ã衚瀺ãããããšãã°ãããŒã®çµã¿åããããControlããŒãShiftããŒãããã³æåCã§ããå ŽåãMacã®ãã©ãŠã¶ãŒã"^â§C"ã衚瀺ãããããããªãäžæ¹ã§ãWindowsã®ãã©ãŠã¶ãŒã¯"Ctrl+Shift+C"ã衚瀺ãããããããªããäžæ¹ã§Emacsã®ãã©ãŠã¶ãŒã¯åã«"C-C"ã衚瀺ãããããããªããåæ§ã«ãããŒã®çµã¿åãããAltããŒãšEscããŒã§ããå ŽåãWindowsã¯"Alt+Esc"ã䜿çšããããããããMacã¯"â¥â"ã䜿çšããããããããEmacsã®ãã©ãŠã¶ãŒã¯ã"M-ESC"ãŸãã¯"ESC ESC"ã䜿çšãããããããªãã
ãããã£ãŠãäžè¬ã«ãaccessKeyLabel IDL屿§ããè¿ãããå€ãè§£æããããšããã®ã¯è³¢æã§ã¯ãªãã
accesskey屿§Support in all current engines.
ãã¹ãŠã®HTMLèŠçŽ ã¯ãaccesskeyã³ã³ãã³ã屿§ã®èšå®ãæã£ãŠããããaccesskey屿§å€ã¯ãèŠçŽ ãã¢ã¯ãã£ãã«ãããŸãã¯ãã©ãŒã«ã¹ããããŒããŒãã·ã§ãŒãã«ãããäœæããããã®ã¬ã€ããšããŠããŠãŒã¶ãŒãšãŒãžã§ã³ãã«ãã£ãŠäœ¿çšãããã
æå®ãããå Žåãå€ã¯ãé åºä»ãã®äžæãªç©ºçœåºåãããŒã¯ã³ã®éåã§ãªããã°ãªããªãããããã®ããŒã¯ã³ã¯ããããå¥ã®ããŒã¯ã³ãšåäžã§ãªãããããããæ£ç¢ºã«1ã³ãŒããã€ã³ãé·ãã§ãªããã°ãªããªãã
次ã®äŸã«ãããŠããµã€ããçç¥ããããŒããŒããŠãŒã¶ãŒãããè¿ éã«é¢é£ããããŒãžã«ç§»åã§ãããããããŸããŸãªãªã³ã¯ãã¢ã¯ã»ã¹ããŒãšãšãã«äžããããïŒ
< nav >
< p >
< a title = "Consortium Activities" accesskey = "A" href = "/Consortium/activities" > Activities</ a > |
< a title = "Technical Reports and Recommendations" accesskey = "T" href = "/TR/" > Technical Reports</ a > |
< a title = "Alphabetical Site Index" accesskey = "S" href = "/Consortium/siteindex" > Site Index</ a > |
< a title = "About This Site" accesskey = "B" href = "/Consortium/" > About Consortium</ a > |
< a title = "Contact Consortium" accesskey = "C" href = "/Consortium/contact" > Contact</ a >
</ p >
</ nav >
次ã®äŸã«ãããŠãæ€çŽ¢ãã£ãŒã«ãã¯2ã€ã®å¯èœãªã¢ã¯ã»ã¹ããŒã"s"ãš"0"ïŒãã®é çªã§ïŒãäžããããããã³ããŒä»ãã®å°ããªããã€ã¹äžã®ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯åãªãç°¡çŽ ãªããŒ0ãéžã¶ãããããªããããã«ããŒããŒããæèŒããããã€ã¹ã§ã®ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãã·ã§ãŒãã«ããããŒãšããŠCtrl + Alt + Sãéžã¶ãããããªãïŒ
< form action = "/search" >
< label > Search: < input type = "search" name = "q" accesskey = "s 0" ></ label >
< input type = "submit" >
</ form >
次ã®äŸã«ãããŠããã¿ã³ã¯èª¬æå¯èœãªã¢ã¯ã»ã¹ããŒãæã€ããã®ã¹ã¯ãªããã¯æ¬¡ã«ããŠãŒã¶ãŒãšãŒãžã§ã³ããéžæããããŒã®çµã¿åãããéç¥ããããã«ãã¿ã³ã®ã©ãã«ã®æŽæ°ã詊ã¿ãã
< input type = submit accesskey = "N @ 1" value = "Compose" >
...
< script >
function labelButton( button) {
if ( button. accessKeyLabel)
button. value += ' (' + button. accessKeyLabel + ')' ;
}
var inputs = document. getElementsByTagName( 'input' );
for ( var i = 0 ; i < inputs. length; i += 1 ) {
if ( inputs[ i]. type == "submit" )
labelButton( inputs[ i]);
}
</ script >
ãããŠãŒã¶ãŒãšãŒãžã§ã³ãã«ãããŠããã¿ã³ã®ã©ãã«ã¯"ComposeïŒâNïŒ"ã«ãªããããããªããå¥ã®ãã®ã«ãããŠãããã¯"ComposeïŒAlt+â§+1ïŒ"ã«ãªããããããªãããŠãŒã¶ãŒãšãŒãžã§ã³ããããŒãå²ãåœãŠãªãå Žåãåã«"Compose"ã«ãªããæ£ç¢ºãªæååã¯å²ãåœãŠãããã¢ã¯ã»ã¹ããŒãäœã§ããããããã³ã©ã®ããã«ãŠãŒã¶ãŒãšãŒãžã§ã³ãããã®ããŒã®çµã¿åããã衚ããã«äŸåããã
An element's assigned access key is a key combination derived from the element's accesskey content attribute. Initially, an element must not have an assigned access key.
Whenever an element's accesskey attribute is set, changed, or removed, the user agent must update the element's assigned access key by running the following steps:
If the element has no accesskey attribute, then skip to the fallback step below.
Otherwise, split the attribute's value on ASCII whitespace, and let keys be the resulting tokens.
For each value in keys in turn, in the order the tokens appeared in the attribute's value, run the following substeps:
If the value is not a string exactly one code point in length, then skip the remainder of these steps for this value.
If the value does not correspond to a key on the system's keyboard, then skip the remainder of these steps for this value.
If the user agent can find a mix of zero or more modifier keys that, combined with the key that corresponds to the value given in the attribute, can be used as the access key, then the user agent may assign that combination of keys as the element's assigned access key and return.
Fallback: Optionally, the user agent may assign a key combination of its choosing as the element's assigned access key and then return.
If this step is reached, the element has no assigned access key.
Once a user agent has selected and assigned an access key for an element, the user agent should not change the element's assigned access key unless the accesskey content attribute is changed or the element is moved to another Document.
When the user presses the key combination corresponding to the assigned access key for an element, if the element defines a command, the command's facet is false (visible), the command's Disabled State facet is also false (enabled), the element is in a document that has a non-null browsing context, and neither the element nor any of its ancestors has a attribute specified, then the user agent must trigger the Action of the command.
User agents might expose elements that have an accesskey attribute in other ways as well, e.g. in a menu displayed in response to a specific key combination.
The accessKeyLabel IDL attribute must return a string that represents the element's assigned access key, if any. If the element does not have one, then the IDL attribute must return the empty string.
contenteditableã³ã³ãã³ã屿§Support in all current engines.
interface mixin ElementContentEditable {
[CEReactions ] attribute DOMString contentEditable ;
[CEReactions ] attribute DOMString enterKeyHint ;
readonly attribute boolean isContentEditable ;
[CEReactions ] attribute DOMString inputMode ;
};
Global_attributes/contenteditable
Support in all current engines.
enctypeã³ã³ãã³ã屿§ã¯ã次ã®ããŒã¯ãŒãããã³ç¶æ
ããã€åæå±æ§ã§ããïŒ
| ããŒã¯ãŒã | ç¶æ | æŠèŠ |
|---|---|---|
true | True | èŠçŽ ã¯ç·šéå¯èœã§ããã |
false | False | èŠçŽ ã¯ç·šéå¯èœã§ãªãã |
plaintext-only | Plaintext-Only | èŠçŽ ã®çã®ããã¹ãã³ã³ãã³ãã®ã¿ãç·šéå¯èœã§ããããªãããã©ãŒãããã¯ç¡å¹ã«ãªãã |
ãã®å±æ§ã®æ¬ æå€ã®ããã©ã«ãããã³ç¡å¹å€ã®ããã©ã«ãã¯äž¡æ¹ãšãinheritç¶æ ã§ãããç¶æ¿ç¶æ ã¯ã芪èŠçŽ ã®ç¶æ ã«åºã¥ããŠèŠçŽ ãç·šéå¯èœã§ããïŒãŸãã¯ç·šéå¯èœã§ãªãïŒããšã瀺ãã屿§ã®ç©ºã®å€ã®ããã©ã«ãã¯Trueç¶æ ã§ããã
ããšãã°ããŠãŒã¶ãŒãHTMLã䜿çšããèšäºãæžãããšãæåŸ
ããããæ°ããèšäºãå
¬éããããã«formããã³textareaãæã€ããŒãžãèããŠã¿ãïŒ
< form method = POST >
< fieldset >
< legend > New article</ legend >
< textarea name = article > < p>Hello world.< /p></ textarea >
</ fieldset >
< p >< button > Publish</ button ></ p >
</ form >
ã¹ã¯ãªãããæå¹ã«ããå ŽåãtextareaèŠçŽ ã¯ãcontenteditable屿§ã䜿çšããŠã代ããã«ãªããããã¹ãã³ã³ãããŒã«ã«çœ®ãæããããšãã§ããïŒ
< form method = POST >
< fieldset >
< legend > New article</ legend >
< textarea id = textarea name = article > < p>Hello world.< /p></ textarea >
< div id = div style = "white-space: pre-wrap" hidden >< p > Hello world.</ p ></ div >
< script >
let textarea = document. getElementById( "textarea" );
let div = document. getElementById( "div" );
textarea. hidden = true ;
div. hidden = false ;
div. contentEditable = "true" ;
div. oninput = ( e) => {
textarea. value = div. innerHTML;
};
</ script >
</ fieldset >
< p >< button > Publish</ button ></ p >
</ form >
ããšãã°æ¿å
¥ãªã³ã¯ãæ¿å
¥ããæ©èœã¯ãdocument.execCommand()APIã䜿çšããããŸãã¯SelectionAPIããã³ä»ã®DOM APIã䜿çšããŠå®è£
ããããšãã§ããã[EXECCOMMAND] [SELECTION] [DOM]
contenteditable屿§ã¯ãŸãã倧ããªå¹æã䜿çšããããšãã§ããïŒ
<!doctype html>
< html lang = en >
< title > Live CSS editing!</ title >
< style style = white-space:pre contenteditable >
html { margin : .2 em ; font-size : 2 em ; color : lime ; background : purple }
head , title , style { display : block }
body { display : none }
</ style >
element.contentEditable [ = value ]contenteditable屿§ã®ç¶æ
ã«åºã¥ããŠã"true"ã"plaintext-only"ã"false"ããŸãã¯"inherit"ãè¿ãã
ãã®ç¶æ ã倿Žããèšå®ãå¯èœã§ããã
æ°ããå€ããããã®æååã®ããããã§ãªãå Žåã"SyntaxError" DOMExceptionãæããã
element.isContentEditableSupport in all current engines.
èŠçŽ ãç·šéå¯èœãªå Žåã«trueãè¿ããããã§ãªããã°falseãè¿ãã
The contentEditable IDL attribute, on getting, must return the string "true" if the content attribute is set to the True state, "plaintext-only" if the content attribute is set to the Plaintext-Only state, "false" if the content attribute is set to the False state, and "inherit" otherwise. On setting, if the new value is an ASCII case-insensitive match for the string "inherit", then the content attribute must be removed, if the new value is an ASCII case-insensitive match for the string "true", then the content attribute must be set to the string "true", if the new value is an ASCII case-insensitive match for the string "plaintext-only", then the content attribute must be set to the string "plaintext-only", if the new value is an ASCII case-insensitive match for the string "false", then the content attribute must be set to the string "false", and otherwise the attribute setter must throw a "SyntaxError" DOMException.
The isContentEditable IDL attribute, on getting, must return true if the element is either an editing host or editable, and false otherwise.
designModeã®ã²ãã¿ãŒããã³ã»ãã¿ãŒdocument.designMode [ = value ]Support in all current engines.
ææžãç·šéå¯èœã§ããå Žåã«"on"ãè¿ãããªãå Žåã«"off"ãè¿ãã
ææžã®çŸåšã®ç¶æ ã倿Žããèšå®ãå¯èœã§ãããããã¯ãææžããã©ãŒã«ã¹ãããã®ææžã§ææžã®éžæããªã»ããããã
Document objects have an associated design mode enabled, which is a boolean. æåã¯falseã§ããã
The designMode getter steps are to return "on" if this's design mode enabled is true; otherwise "off".
The designMode setter steps are:
Let value be the given value, converted to ASCII lowercase.
If value is "on" and this's design mode enabled is false:
Set this's design mode enabled to true.
Reset this's active range's start and end boundary points to be at the start of this.
Run the focusing steps for this's document element, if non-null.
If value is "off", then set this's design mode enabled to false.
èè ã¯ãããšããšå€'pre-wrap'ãžãããç·šéã®ã¡ã«ããºã ãä»ããŠäœæãããç·šéãã¹ãããã³ããŒã¯ã¢ããäžã®'white-space'ããããã£ãèšå®ããããšã奚ãããããã©ã«ãã®HTML空çœåŠçã¯ãããŸãWYSIWYGç·šéã«åããããããŠ'white-space'ãããã©ã«ãå€ã®ãŸãŸã§ããå Žåãããã€ãã®ã³ãŒããŒã®å Žåã«ãããŠãè¡ã®æãè¿ãã¯æ£ããåäœããªãã
ããã©ã«ã'normal'å€ã代ããã«äœ¿çšãããå Žåã«çºçããåé¡ã®äŸãšããŠãåèªã®éã«2ã€ã®ã¹ããŒã¹ïŒããã§ã¯"â£"ã«ãã£ãŠè¡šãããïŒãšãšãã«ã"yellowâ£â£ball"ãšå ¥åãããŠãŒã¶ãŒã®å Žåãèããã'white-space'ã®ããã©ã«ãå€ïŒ'normal'ïŒã®ããã®å Žæã§ã®ç·šéèŠåãšãã«ãçµæã®ããŒã¯ã¢ããã¯ã"yellow  ball"ãŸãã¯"yellow ball"ã®ããããã§æ§æããããããªãã¡ã2ã€ã®åèªéã®éé祚ã¹ããŒã¹ã«å ããŠãéåžžã¹ããŒã¹ãååšããã'white-space'ã«å¯Ÿãã'normal'å€ã¯å ±ã«çžæ®ºããããã«é£æ¥ããéåžžã¹ããŒã¹ãå¿ èŠãšãããããããã¯å¿ èŠã§ããã
åè ã®å Žåã«ãããŠãããšãè¡ã®æ«å°Ÿã§"yellow"åç¬ã§äžèŽãããšããŠãã"yellowâœ"ã¯æ¬¡ã®è¡ïŒ"âœ"ã¯éæ¹è¡ã¹ããŒã¹ã衚ãããã«ããã§äœ¿çšãããŠããïŒã«æãè¿ããåŸè ã®å Žåã«ãããŠãè¡ã®å é ã«å ãŸããå Žåã"âœball"ã¯éæ¹è¡ã¹ããŒã¹ç±æ¥ã®å¯èŠã€ã³ãã³ããæã€ã ããã
ãããã'white-space'ã'pre-wrap'ã«èšå®ãããå Žåãç·šéèŠåã¯ã代ããã«åã«åèªéã«2ã€ã®éåžžã®ã¹ããŒã¹ã眮ãã2ã€ã®åèªãè¡æ«ã§åå²ãããã¹ãã§ãããã¹ããŒã¹ã¯ã¬ã³ããªã³ã°ããåé€ãããŠãããã«ãªãã
An editing host is either an HTML element with its contenteditable attribute in the true state or plaintext-only state, or a child HTML element of a Document whose design mode enabled is true.
The definition of the terms active range, editing host of, and editable, the user interface requirements of elements that are editing hosts or editable, the execCommand(), queryCommandEnabled(), queryCommandIndeterm(), queryCommandState(), queryCommandSupported(), and queryCommandValue() methods, text selections, and the delete the selection algorithm are defined in execCommand. [EXECCOMMAND]
User agents can support the checking of spelling and grammar of editable text, either in form controls (such as the value of textarea elements), or in elements in an editing host (e.g. using contenteditable).
For each element, user agents must establish a default behavior, either through defaults or through preferences expressed by the user. There are three possible default behaviors for each element:
spellcheck attribute.spellcheck attribute.Support in all current engines.
spellcheck屿§ã¯ã次ã®ããŒã¯ãŒããšç¶æ
ãæã€åæå±æ§ã§ããïŒ
| ããŒã¯ãŒã | ç¶æ | æŠèŠ |
|---|---|---|
true | True | ã¹ãã«ããã³ææ³ããã§ãã¯ãããã |
false | False | ã¹ãã«ããã³ææ³ããã§ãã¯ãããªãã |
ãã®å±æ§ã®æ¬ æå€ã®ããã©ã«ããšç¡å¹å€ã®ããã©ã«ãã¯ãäž¡æ¹ãšãDefaultç¶æ
ã§ãããããã©ã«ãç¶æ
ã¯ãäžèšã§å®çŸ©ãããããã«ããããã芪èŠçŽ èªèº«ã®spellcheckç¶æ
ã«åºã¥ããŠãããã©ã«ãã®åäœã«å¿ããŠåäœããèŠçŽ ã§ããããšã瀺ãã屿§ã®ç©ºã®å€ã®ããã©ã«ãã¯Trueç¶æ
ã§ããã
element.spellcheck [ = value ]èŠçŽ ãã¹ãã«ãææ³ãã§ãã¯ãæã€å Žåã¯trueãè¿ããããã§ãªããã°falseãè¿ãã
ããã©ã«ããäžæžãããŠspellcheckã³ã³ãã³ã屿§ãèšå®ããããã®ãèšå®ãå¯èœã§ããã
The spellcheck IDL attribute, on getting, must return true if the element's spellcheck content attribute is in the True state, or if the element's spellcheck content attribute is in the Default state and the element's default behavior is true-by-default, or if the element's spellcheck content attribute is in the Default state and the element's default behavior is inherit-by-default and the element's parent element's spellcheck IDL attribute would return true; otherwise, if none of those conditions applies, then the attribute must instead return false.
The spellcheck IDL attribute is not affected by user preferences that override the spellcheck content attribute, and therefore might not reflect the actual spellchecking state.
On setting, if the new value is true, then the element's spellcheck content attribute must be set to "true", otherwise it must be set to "false".
User agents should only consider the following pieces of text as checkable for the purposes of this feature:
input elements whose type attributes are in the Text, Search, URL, or Email states and that are mutable (i.e. that do not have the readonly attribute specified and that are not disabled).textarea elements that do not have a readonly attribute and that are not disabled.Text nodes that are children of editing hosts or editable elements.For text that is part of a Text node, the element with which the text is associated is the element that is the immediate parent of the first character of the word, sentence, or other piece of text. For text in attributes, it is the attribute's element. For the values of input and textarea elements, it is the element itself.
To determine if a word, sentence, or other piece of text in an applicable element (as defined above) is to have spelling- and grammar-checking enabled, the UA must use the following algorithm:
spellcheck content attribute, then: if that attribute is in the True state, then checking is enabled; otherwise, if that attribute is in the False state, then checking is disabled.spellcheck content attribute that is not in the Default state, then: if the nearest such ancestor's spellcheck content attribute is in the True state, then checking is enabled; otherwise, checking is disabled.If the checking is enabled for a word/sentence/text, the user agent should indicate spelling and grammar errors in that text. User agents should take into account the other semantics given in the document when suggesting spelling and grammar corrections. User agents may use the language of the element to determine what spelling and grammar rules to use, or may use the user's preferred language settings. UAs should use input element attributes such as pattern to ensure that the resulting value is valid, where possible.
If checking is disabled, the user agent should not indicate spelling or grammar errors for that text.
The element with ID "a" in the following example would be the one used to determine if the word "Hello" is checked for spelling errors. In this example, it would not be.
< div contenteditable = "true" >
< span spellcheck = "false" id = "a" > Hell</ span >< em > o!</ em >
</ div >
The element with ID "b" in the following example would have checking enabled (the leading space character in the attribute's value on the input element causes the attribute to be ignored, so the ancestor's value is used instead, regardless of the default).
< p spellcheck = "true" >
< label > Name: < input spellcheck = " false" id = "b" ></ label >
</ p >
ãã®ä»æ§ã¯ãã¹ãã«ãææ³ãã§ãã«ãŒã«å¯ŸãããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ã€ã¹ãå®çŸ©ããªãããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãªã³ããã³ããã§ãã¯ãæäŸãããããããããã§ãã¯ãæå¹ã§ããéã«é£ç¶çãªãã§ãã¯ãå®è¡ãããããããããŸãã¯ä»ã®ã€ã³ã¿ãŒãã§ã€ã¹ã䜿çšãããããããªãã
ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ããŠãŒã¶ãŒããã©ãŒã ã³ã³ãããŒã«ïŒtextareaèŠçŽ ãªã©ïŒãŸãã¯ç·šéãã¹ãå
ã®èŠçŽ ã®ããããã®ç·šéå¯èœé åã«å
¥åãããšãã«ãæžã蟌ã¿ã®ææ¡ãæäŸããã
writingsuggestionsã³ã³ãã³ã屿§ã¯ã次ã®ããŒã¯ãŒãããã³ç¶æ
ããã€åæå±æ§ã§ããïŒ
| ããŒã¯ãŒã | ç¶æ | æŠèŠ |
|---|---|---|
true | True | ãã®èŠçŽ ã«ã€ããŠã¯ãæžã蟌ã¿ã®ææ¡ãè¡ãã¹ãã§ããã |
false | False | ãã®èŠçŽ ã«ã€ããŠã¯ãæžã蟌ã¿ã®ææ¡ãè¡ãã¹ãã§ãªãã |
ãã®å±æ§ã®æ¬ æå€ã®ããã©ã«ãã¯ãDefaultç¶æ
ã§ãããããã©ã«ãç¶æ
ã¯ãäžèšã§å®çŸ©ãããããã«ããããã芪èŠçŽ èªèº«ã®writingsuggestionsç¶æ
ã«åºã¥ããŠãããã©ã«ãã®åäœã«å¿ããŠåäœããèŠçŽ ã§ããããšã瀺ãã
屿§ã®ç¡å¹å€ã®ããã©ã«ãããã³ç©ºã®å€ã®ããã©ã«ãã¯ãäž¡æ¹ãšãTrueç¶æ ã§ããã
element.writingSuggestions [ = value ]ãŠãŒã¶ãŒãšãŒãžã§ã³ããèŠçŽ ã®ã¹ã³ãŒãã®äžã§æžã蟌ã¿ã®ææ¡ãè¡ãå Žå㯠"true"ãè¿ããããã§ãªããã° "false"ãè¿ãã
ããã©ã«ããäžæžãããŠwritingsuggestionsã³ã³ãã³ã屿§ãèšå®ããããã®ãèšå®ãå¯èœã§ããã
The computed writing suggestions value of a given element is determined by running the following steps:
If element's writingsuggestions content attribute is in the False state, return "false".
If element's writingsuggestions content attribute is in the Default state, element has a parent element, and the computed writing suggestions value of element's parent element is "false", then return "false".
Return "true".
The writingSuggestions getter steps are:
Return this's computed writing suggestions value.
The writingSuggestions IDL attribute is not affected by user preferences that override the writingsuggestions content attribute, and therefore might not reflect the actual writing suggestions state.
User agents should only offer suggestions within an element's scope if the result of running the following algorithm given element returns true:
If the user has disabled writing suggestions, then return false.
If none of the following conditions are true:
element is an input element whose type attribute is in either the Text, Search, Telephone, URL, or Email state and element is mutable;
element is an editing host or is editable,
then return false.
If element has an inclusive ancestor with a writingsuggestions content attribute that's not in the Default and the nearest such ancestor's writingsuggestions content attribute is in the False state, then return false.
Otherwise, return true.
This specification does not define the user interface for writing suggestions. A user agent could offer on-demand suggestions, continuous suggestions as the user types, inline suggestions, autofill-like suggestions in a popup, or could use other interfaces.
ã¢ãã€ã«ããã€ã¹äžã®ä»®æ³ããŒããŒããé³å£°å
¥åãªã©ãããã¹ããå
¥åããããã€ãã®æ¹æ³ã§ã¯ãæã®æåã®æåãèªåçã«å€§æåã«ããããšã§ãŠãŒã¶ãŒãæ¯æŽããããšãããïŒãã®èŠåã§èšèªã§ããã¹ããæ§æããå ŽåïŒãèªå倧æååãå®è£
ããä»®æ³ããŒããŒãã¯ãèªå倧æåã«ãã¹ãæåãå
¥åããããšãããšãã倧æåã®æåã衚瀺ããããã«èªåçã«åãæ¿ãããããããªãïŒãã ãããŠãŒã¶ãŒã¯ãã®æåãå°æåã«åãæ¿ãå¯èœã§ããïŒãäŸãã°é³å£°å
¥åãªã©ãä»ã®å
¥åã®çš®é¡ã¯ããŠãŒã¶ãŒãæåã«ä»å
¥ãããªãã·ã§ã³ãäžããªããããªæ¹æ³ã§èªå倧æååãè¡ã£ãŠããããautocapitalize屿§ã¯ãèè
ããã®ãããªæ¯ãèããå¶åŸ¡ããã®ãå¯èœã«ããã
å
žåçã«å®è£
ãããããã«ãautocapitalize屿§ã¯ãç©çããŒããŒãã§å
¥åãããšãã®åäœã«åœ±é¿ããªããïŒãã®çç±ã®ããã«ãå Žåã«ãã£ãŠã¯èªå倧æååã®åäœãäžæžãããããæåã®å
¥åã®åŸã«ããã¹ããç·šéããããšããŠãŒã¶ãŒã®èœåãšåæ§ã«ã屿§ããããªãçš®é¡ã®å
¥åæ€èšŒã«ãåœãŠã«ããŠã¯ãªããªãã
ãã¹ããããŠããç·šéå¯èœé åã®èªå倧æåååäœãå¶åŸ¡ããããã«ç·šéãã¹ãäžã§ããã®èŠçŽ ã«ããã¹ããå
¥åããããã®åäœãå¶åŸ¡ããããã«inputãããã¯textareaèŠçŽ ã®äžã§ããŸãã¯formèŠçŽ ã«é¢é£ä»ãããããã¹ãŠã®èªå倧æååããã³èªåä¿®æ£ç¶æ¿èŠçŽ ã®ããã©ã«ãã®åäœãå¶åŸ¡ããããã«formèŠçŽ äžã§autocapitalize屿§ã䜿çšããããšãã§ããã
autocapitalize屿§ã¯ãtype屿§ãURLãEmailããŸãã¯Passwordç¶æ
ã®ããããã«ããinputèŠçŽ ã«å¯ŸããŠãèªå倧æååãæå¹ã«ããããšã¯ãªãã(This behavior is included in the used autocapitalization hint algorithm below.)
èªå倧æåååŠçã¢ãã«ã¯ã次ã®ããã«å®çŸ©ããã5ã€ã®èªå倧æååãã³ãã®äžããéžæããããšã«åºã¥ãïŒ
ãŠãŒã¶ãŒãšãŒãžã§ã³ãããã³å ¥åã¡ãœããã¯ãèªå倧æååãæå¹ã«ãããã©ãããç¬èªã«æ±ºå®ãã¹ãã§ããã
èªå倧æååã¯é©çšãããã¹ãã§ã¯ãªãïŒãã¹ãŠã®æåã¯å°æåãããã©ã«ãã«ãã¹ãã§ããïŒã
åæã®æåã®æåã¯å€§æåãããã©ã«ãã«ãã¹ãã§ãããä»ã®ãã¹ãŠã®æåã¯å°æåãããã©ã«ãã«ãã¹ãã§ããã
ååèªã®æåã®æåã¯å€§æåãããã©ã«ãã«ãã¹ãã§ãããä»ã®ãã¹ãŠã®æåã¯å°æåãããã©ã«ãã«ãã¹ãã§ããã
å šãŠã®æåã¯å€§æåãããã©ã«ãã«ãã¹ãã§ããã
Global_attributes/autocapitalize
Support in all current engines.
autocapitalize屿§ã¯ãç¶æ
ãå¯èœãªèªå倧æåãã³ãã§ããåæå±æ§ã§ããã屿§ã®ç¶æ
ã§æå®ãããèªå倧æååãã³ãã¯ããŠãŒã¶ãŒãšãŒãžã§ã³ãã®åäœãéç¥ãããäœ¿çšæžã¿ã®èªå倧æååãã³ãã圢æããããã®ä»ã®èæ
®äºé
ãšçµã¿åããããããã®å±æ§ã®ããŒã¯ãŒããšç¶æ
ãããã³ã°ã¯æ¬¡ã®ãšããïŒ
| ããŒã¯ãŒã | ç¶æ |
|---|---|
off | None |
none | |
on | Sentences |
sentences | |
words | Words |
characters | Characters |
ãã®å±æ§ã®æ¬ æå€ã®ããã©ã«ãã¯Defaultç¶æ ã§ãããç¡å¹å€ã®ããã©ã«ãã¯Sentencesç¶æ ã§ããã
element.autocapitalize [ = value ]èŠçŽ ã®çŸåšã®èªå倧æååç¶æ
ãè¿ããèšå®ãããŠããªãå Žåã¯ç©ºæååãè¿ããformèŠçŽ ããç¶æ
ãç¶æ¿ããinputèŠçŽ ãštextareaèŠçŽ ã®å Žåãããã¯formèŠçŽ ã®èªå倧æååç¶æ
ãè¿ãããç·šéå¯èœé åã®èŠçŽ ã®å Žåãããã¯ïŒãã®èŠçŽ ãå®éã«ç·šéãã¹ãã§ãªãéãïŒç·šéãã¹ãã®èªå倧æååç¶æ
ãè¿ããªãããšã«æ³šæããããšã
autocapitalizeã³ã³ãã³ã屿§ãèšå®ããïŒãããŠããã«ãã£ãŠèŠçŽ ã®èªå倧æåååäœãå€åãããïŒããšã§ãèšå®ãå¯èœã§ããã
To compute the own autocapitalization hint of an element element, run the following steps:
If the autocapitalize content attribute is present on element, and its value is not the empty string, return the state of the attribute.
If element is an autocapitalize-and-autocorrect inheriting element and has a non-null form owner, return the own autocapitalization hint of element's form owner.
Return Default.
The autocapitalize getter steps are to:
User agents that support customizable autocapitalization behavior for a text input method and wish to allow web developers to control this functionality should, during text input into an element, compute the used autocapitalization hint for the element. This will be an autocapitalization hint that describes the recommended autocapitalization behavior for text input into the element.
User agents or input methods may choose to ignore or override the used autocapitalization hint in certain circumstances.
The used autocapitalization hint for an element element is computed using the following algorithm:
If element is an input element whose type attribute is in one of the URL, Email, or Password states, then return Default.
If element is an input element or a textarea element, then return element's own autocapitalization hint.
If element is an editing host or an editable element, then return the own autocapitalization hint of the editing host of element.
Assert: this step is never reached, since text input only occurs in elements that meet one of the above criteria.
äžéšã®ããã¹ãå
¥åæ¹æ³ã¯ãå
¥åäžã«ã¹ãã«ãã¹ã®ããåèªãèªåçã«ä¿®æ£ããããšã§ãŠãŒã¶ãŒãæ¯æŽããããã®ããã»ã¹ã¯èªåä¿®æ£ãšãåŒã°ããããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãç·šéå¯èœãªããã¹ãã®èªåä¿®æ£ãããã©ãŒã ã³ã³ãããŒã«ïŒtextareaèŠçŽ ã®å€ãªã©ïŒããŸãã¯ç·šéãã¹ãå
ã®èŠçŽ ïŒcontenteditableã䜿çšãããªã©ïŒã§ãµããŒãã§ãããèªåä¿®æ£ã¯ãããã¹ããèªåä¿®æ£ãããããšããŠããããŸãã¯èªåä¿®æ£ãããããšã瀺ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ã€ã¹ã䌎ã£ãŠããããäžè¬ã«ãã¹ãã«ãã¹ã®ããåèªã®åŸã«å¥èªæåãã¹ããŒã¹ããŸãã¯æ°ããæ®µèœãæ¿å
¥ãããšãã«å®è¡ããããautocorrect屿§ã¯ãèè
ã«ãã®ãããªåäœãå¶åŸ¡ãå¯èœã«ããã
ãã¹ããããŠããç·šéå¯èœé åã®èªå倧æåååäœãå¶åŸ¡ããããã«ç·šéãã¹ãäžã§ããã®èŠçŽ ã«ããã¹ããå
¥åããããã®åäœãå¶åŸ¡ããããã«inputãããã¯textareaèŠçŽ ã®äžã§ããŸãã¯formèŠçŽ ã«é¢é£ä»ãããããã¹ãŠã®èªå倧æååããã³èªåä¿®æ£ç¶æ¿èŠçŽ ã®ããã©ã«ãã®åäœãå¶åŸ¡ããããã«formèŠçŽ äžã§autocapitalize屿§ã䜿çšããããšãã§ããã
type屿§ãURLãEmailãŸãã¯Passwordã®ããããã®ç¶æ
ã«ããinputèŠçŽ ã§ã¯autocorrect屿§ã«ãã£ãŠèªåä¿®æ£ãæå¹ã«ãªãããšã¯ãªãã(This behavior is included in the used autocorrection state algorithm below.)
autocorrect屿§ã¯ã次ã®ããŒã¯ãŒããšç¶æ
ãæã€åæå±æ§ã§ããïŒ
| ããŒã¯ãŒã | ç¶æ | æŠèŠ |
|---|---|---|
on | On | ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ããŠãŒã¶ãŒã®å ¥åäžã«ã¹ãã«ãã¹ãèªåçã«ä¿®æ£ããããšãã§ãããå·Šãžã®å ¥åäžã«ã¹ãã«ãèªåçã«ä¿®æ£ããããã©ããã¯ããŠãŒã¶ãŒãšãŒãžã§ã³ããæ±ºå®ãããã®ã§ãããèŠçŽ ãšãŠãŒã¶ãŒã®å¥œã¿ã«ãã£ãŠæ±ºãŸã£ãŠãããã |
off | Off | ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ããŠãŒã¶ãŒã®å ¥åäžã«ã¹ãã«ãèªåçã«ä¿®æ£ããããšã¯ã§ããªãã |
屿§ã®ç¡å¹å€ã®ããã©ã«ããæ¬ æå€ã®ããã©ã«ãããã³ç©ºã®å€ã®ããã©ã«ãã¯ããã¹ãŠOnç¶æ ã§ããã
autocorrectã²ãã¿ãŒã¹ãããã¯æ¬¡ã®ãšããïŒèŠçŽ ã®äœ¿çšãããèªåä¿®æ£ç¶æ
ãOnã®å Žåã¯trueãè¿ããèŠçŽ ã®äœ¿çšãããèªåä¿®æ£ç¶æ
ãOffã®å Žåã¯falseãè¿ããã»ãã¿ãŒã¹ãããæé ã¯æ¬¡ã®ãšããïŒæå®ããå€ãtrueã®å ŽåãèŠçŽ ã®autocorrect屿§ã"on"ã«èšå®ããªããã°ãªããªããããã§ãªããã°ã"off"ã«èšå®ããªããã°ãªããªãã
To compute the used autocorrection state of an element element, run these steps:
If element is an input element whose type attribute is in one of the URL, Email, or Password states, then return Off.
If the autocorrect content attribute is present on element, then return the state of the attribute.
If element is an autocapitalize-and-autocorrect inheriting element and has a non-null form owner, then return the state of element's form owner's autocorrect attribute.
Return On.
autocorrectèŠçŽ ã®èªåä¿®æ£åäœãè¿ããformèŠçŽ ããç¶æ
ãç¶æ¿ããèªå倧æååããã³èªåä¿®æ£ã®ç¶æ¿èŠçŽ ã®å Žåãããã¯formèŠçŽ ã®èªåä¿®æ£åäœãè¿ãããç·šéå¯èœé åå
ã®èŠçŽ ã®å Žåãç·šéãã¹ãã®èªåä¿®æ£åäœã¯è¿ããªãïŒãã®èŠçŽ ãå®éã«ç·šéãã¹ãã§ãªãå ŽåïŒã
autocorrect = valueautocorrectã³ã³ãã³ã屿§ãæŽæ°ããïŒãããŠããã«ãããèŠçŽ ã®èªåä¿®æ£åäœã倿ŽãããïŒã
inputèŠçŽ ã¯ãautocorrectã³ã³ãã³ã屿§ãæããªãããã"off"ãšãã屿§ãæã€formèŠçŽ ããç¶æ¿ããããããèªåä¿®æ£ãã§ããªããããããtextareaèŠçŽ ã¯ãå€ã"on"ã®autocorrectã³ã³ãã³ã屿§ããããããèªåä¿®æ£ãå¯èœã§ããã
< form autocorrect = "off" >
< input type = "search" >
< textarea autocorrect = "on" ></ textarea >
</ form >
inputmode屿§ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ããã©ãŒã ã³ã³ãããŒã«ïŒtextareaèŠçŽ ã®å€ãªã©ïŒã§ããŸãã¯ç·šéãã¹ãïŒcontenteditableãªã©ïŒã«ãããèŠçŽ ã§inputmode屿§ããµããŒãããããšãã§ããã
Support in all current engines.
inputmodeã³ã³ãã³ã屿§ã¯ããŠãŒã¶ãŒãã³ã³ãã³ããå
¥åããéã«æãåèã«ãªãå
¥åã¡ã«ããºã ã®çš®é¡ãæå®ããåæå±æ§ã§ããã
| ããŒã¯ãŒã | 説æ |
|---|---|
none | ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ä»®æ³ããŒããŒãã衚瀺ãã¹ãã§ã¯ãªãããã®ããŒã¯ãŒãã¯ãç¬èªã®ããŒããŒãã³ã³ãããŒã«ãã¬ã³ããªã³ã°ããã³ã³ãã³ãã«åœ¹ç«ã€ã |
text | ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ããŠãŒã¶ãŒã®ãã±ãŒã«ã§ããã¹ãå ¥åãå¯èœãªä»®æ³ããŒããŒãã衚瀺ãã¹ãã§ããã |
tel | ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãé»è©±çªå·å ¥åãå¯èœãªä»®æ³ããŒããŒãã衚瀺ãã¹ãã§ããããããã¯ãæ°å0ã9ã"ïŒ"æåãããã³"*"æåã®ããŒãå«ãã¹ãã§ãããäžéšã®ãã±ãŒã«ã§ãããã¯ãŸããã¢ã«ãã¡ãããã®ããŒã¢ããã¯ã©ãã«ïŒããšãã°ãç±³åœã§ã"2"ããŒã¯ãŸããæŽå²çã«æåAãBãããã³Cã§æšèãããŠããïŒãå«ãããšãã§ããã |
url | ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ã"/"ãš"."æåã"www"ã".com"ã®ãããªãã¡ã€ã³åã®äžã§èŠã€ãã£ãæååãç°¡åã«å ¥åããããã®ãURLã®å ¥åãè£å©ããããã®ããŒãšãšãã«ããŠãŒã¶ãŒã®ãã±ãŒã«ã§ããã¹ãå ¥åãå¯èœãªä»®æ³ããŒããŒãã衚瀺ãã¹ãã§ããã |
email | ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ã"@"æåããã³"."æåã®ãããªãé»åã¡ãŒã«ã¢ãã¬ã¹ã®å ¥åãè£å©ããããã®ããŒãšãšãã«ããŠãŒã¶ãŒã®ãã±ãŒã«ã§ããã¹ãå ¥åãå¯èœãªä»®æ³ããŒããŒãã衚瀺ãã¹ãã§ããã |
numeric | ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãæ°åå ¥åãå¯èœãªä»®æ³ããŒããŒãã衚瀺ãã¹ãã§ãããããã®ããŒã¯ãŒãã¯ãPINå ¥åã«äŸ¿å©ã§ããã |
decimal | ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãå°æ°å ¥åãå¯èœãªä»®æ³ããŒããŒãã衚瀺ãã¹ãã§ãããããã±ãŒã«ã®æ°å€ããŒããã³ãã©ãŒãããã»ãã¬ãŒã¿ãŒã衚瀺ãã¹ãã§ããã |
search | ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãæ€çŽ¢ã«æé©åãããä»®æ³ããŒããŒãã衚瀺ãã¹ãã§ããã |
Support in all current engines.
The inputMode IDL attribute must reflect the inputmode content attribute, limited to only known values.
When inputmode is unspecified (or is in a state not supported by the user agent), the user agent should determine the default virtual keyboard to be shown. Contextual information such as the input type or pattern attributes should be used to determine which type of virtual keyboard should be presented to the user.
enterkeyhint屿§ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ããã©ãŒã ã³ã³ãããŒã«ïŒtextareaèŠçŽ ã®å€ãªã©ïŒã§ããŸãã¯ç·šéãã¹ãïŒcontenteditableãªã©ïŒã«ãããèŠçŽ ã§enterkeyhint屿§ããµããŒãããããšãã§ããã
Global_attributes/enterkeyhint
Support in all current engines.
enterkeyhintã³ã³ãã³ã屿§ã¯ãä»®æ³ããŒããŒãã®EnterããŒã«è¡šç€ºããã¢ã¯ã·ã§ã³ã©ãã«ïŒãŸãã¯ã¢ã€ã³ã³ïŒãæå®ããåæå±æ§ã§ãããããã«ããããŠãŒã¶ãŒã«ãšã£ãŠãã圹ç«ã€ããã«ããããã«ãèè
ã¯EnterããŒã®è¡šç€ºãã«ã¹ã¿ãã€ãºãå¯èœã«ããã
| ããŒã¯ãŒã | 説æ |
|---|---|
enter | ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãå žåçã«ã¯æ°ããè¡ãæ¿å ¥ãããæäœ'enter'ã®åå³ãæç€ºãã¹ãã§ããã |
done | ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãå žåçã«ã¯å ¥åãããã®ãããäœããªãããã㊠input method editor (IME)ã¯éããããããšãæå³ãããæäœ'done'ã®åå³ãæç€ºãã¹ãã§ããã |
go | ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãå žåçã«ã¯ãŠãŒã¶ãŒãã¿ã€ãããããã¹ãã®ã¿ãŒã²ããã«ãŠãŒã¶ãŒãé£ããŠè¡ãããšãæå³ãããæäœ'go'ã®åå³ãæç€ºãã¹ãã§ããã |
next | ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãå žåçã«ã¯ããã¹ããåãä»ããæ¬¡ã®ãã£ãŒã«ãã«ãŠãŒã¶ãŒãé£ããŠè¡ããæäœ'next'ã®åå³ãæç€ºãã¹ãã§ããã |
previous | ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãå žåçã«ã¯ããã¹ããåãå ¥ããåã®ãã£ãŒã«ãã«ãŠãŒã¶ãŒãé£ããŠè¡ããæäœ'previous'ã®åå³ãæç€ºãã¹ãã§ããã |
search | ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãå žåçã«ã¯ãŠãŒã¶ãŒãã¿ã€ãããããã¹ãã®æ€çŽ¢ã®çµæã«ãŠãŒã¶ãŒãé£ããŠè¡ããæäœãæ€çŽ¢ãã®åå³ãæç€ºãã¹ãã§ããã |
send | ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãå žåçã«ã¯ããã¹ãããã®ããã¹ãã®ã¿ãŒã²ããã«é ä¿¡ãããæäœ'send'ã®åå³ãæç€ºãã¹ãã§ããã |
Support in all current engines.
The enterKeyHint IDL attribute must reflect the enterkeyhint content attribute, limited to only known values.
When enterkeyhint is unspecified (or is in a state not supported by the user agent), the user agent should determine the default action label (or icon) to present. Contextual information such as the inputmode, type, or pattern attributes should be used to determine which action label (or icon) to present on the virtual keyboard.
ãã®ã»ã¯ã·ã§ã³ã¯ãããŒãžå æ€çŽ¢ãå®çŸ©ãããããã¯ããŠãŒã¶ãŒãç¹å®ã®æ å ±ã«å¯ŸããŠããŒãžã®ã³ã³ãã³ããæ€çŽ¢ã§ããããã«ããäžè¬çãªãŠãŒã¶ãŒãšãŒãžã§ã³ãã®ã¡ã«ããºã ã§ããã
ããŒãžå æ€çŽ¢æ©èœãžã®ã¢ã¯ã»ã¹ã¯ãããŒãžå æ€çŽ¢ã€ã³ã¿ãŒãã§ã€ã¹ãä»ããŠæäŸããããããã¯ãŠãŒã¶ãŒãšãŒãžã§ã³ããæäŸãããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ã€ã¹ã§ããããŠãŒã¶ãŒãå ¥åãšæ€çŽ¢ã®ãã©ã¡ãŒã¿ãŒãæå®ã§ããããããããã®ã€ã³ã¿ãŒãã§ã€ã¹ã¯ãã·ã§ãŒãã«ãããŸãã¯ã¡ãã¥ãŒéžæã®çµæãšããŠè¡šç€ºãããã
ããŒãžå æ€çŽ¢ã€ã³ã¿ãŒãã§ã€ã¹ã®ããã¹ãå ¥åãšèšå®ã®çµã¿åããã¯ããŠãŒã¶ãŒã®ã¯ãšãªãŒã衚ããããã¯éåžžããŠãŒã¶ãŒãæ€çŽ¢ãããããã¹ããšããªãã·ã§ã³ã®èšå®ïŒäŸãã°ãæ€çŽ¢ãåèªã«éå®ããæ©èœãªã©ïŒãå«ãŸããã
ãŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãäžããããã¯ãšãªãŒã®ããŒãžã³ã³ãã³ããåŠçãã0å以äžã®ããããèå¥ãããããã¯ãŠãŒã¶ãŒã¯ãšãªãŒãæºããã³ã³ãã³ãç¯å²ã§ããã
ãããã®1ã€ãã¢ã¯ãã£ããªããããšããŠãŠãŒã¶ãŒã«èå¥ãããã ããã¯ãã€ã©ã€ããããã¹ã¯ããŒã«ããŠè¡šç€ºãããããŠãŒã¶ãŒã¯ãããŒãžå æ€çŽ¢ã€ã³ã¿ãŒãã§ã€ã¹ã䜿çšããŠã¢ã¯ãã£ããªããããåé²ãããããšã«ãããããããããã²ãŒãã§ããã
Issue #3539ã¯ãããŒãžå
æ€çŽ¢ãçŸåšæå®ãããŠããªãwindow.find() APIã®åºç€ãšãªãæ¹æ³ã®æšæºåã远跡ããã
ããŒãžå æ€çŽ¢ãäžèŽãããã®ã®æ€çŽ¢ãéå§ãããšãã 屿§ãèšå®ãããŠããªãããŒãžå ã®ãã¹ãŠã®èŠçŽ ã¯ãããŒãžå æ€çŽ¢ãæ€çŽ¢ã§ããããã«ããããã«ã屿§ã倿Žããã«ã2çªç®ã®ã¹ãããã®ã«ã¢ã¯ã»ã¹ã§ããããã«ãã¹ãã§ãããåæ§ã«ãç¶æ ã®å±æ§ããã€ãã¹ãŠã®HTMLèŠçŽ ã¯ãããŒãžå æ€çŽ¢ã§æ€çŽ¢ã§ããããã«ããããã«ã屿§ã倿Žããã«ã«ã¢ã¯ã»ã¹ã§ããããã«ãã¹ãã§ãããããŒãžå æ€çŽ¢ãäžèŽã®æ€çŽ¢ãçµäºããåŸãèŠçŽ ãšãç¶æ ã®å±æ§ããã€èŠçŽ ã¯ãã³ã³ãã³ããåã³ã¹ããããããããã«ãã¹ãã§ããããã®ããã»ã¹å šäœã¯åæçã«è¡ãããªããã°ãªããªãïŒãããã£ãŠããŠãŒã¶ãŒãèè ã®ã³ãŒããç£èŠããããšã¯ã§ããªãïŒã[CSSCONTAIN]
When find-in-page chooses a new , perform the following steps:
Let node be the first node in the .
on the given node's to run the on node.
ãã®ããã«ããŒãžå æ€çŽ¢ãèŠçŽ ãèªåå±éãããšãã€ãã³ããçºç«ãããããŒãžå æ€çŽ¢ãèµ·åããå¥ã®ã€ãã³ããšåæ§ã«ããã®ã€ãã³ãã¯ããŠãŒã¶ãŒãããŒãžå æ€çŽ¢ã®ãã€ã¢ãã°ã«å ¥åããŠããå å®¹ãæ€åºããããã«ããŒãžã«ãã£ãŠäœ¿çšããããããŒãžããçŸåšã®æ€çŽ¢èªãšããŠãŒã¶ãŒãå ¥åã§ãããã¹ãŠã®æ¬¡ã®æåãã®ã£ããã§åºåã£ãå°ããªã¹ã¯ããŒã«å¯èœé åãäœæãããã©ãŠã¶ãã©ã®æåã«ã¹ã¯ããŒã«ãããã芳å¯ããå Žåããã®æåãæ€çŽ¢èªã«è¿œå ããã¹ã¯ããŒã«å¯èœé åãæŽæ°ããŠãæ€çŽ¢èªã段éçã«æ§ç¯ã§ãããèããããæ¬¡ã®ããããããããéããèŠçŽ ã§ã©ããããããšã§ãããŒãžã¯ã€ãã³ãã§ã¯ãªãã€ãã³ãããªãã¹ã³ããããšãã§ããããã®æ»æã¯ããŠãŒã¶ãŒãããŒãžå æ€çŽ¢ãã€ã¢ãã°ã«å ¥åãããã¹ãŠã®æåã«äœçšããªãããšã«ãã£ãŠãäž¡æ¹ã®ã€ãã³ãã«å¯ŸããŠå¯ŸåŠããããšãã§ããã
ããŒãžå æ€çŽ¢ããã»ã¹ã¯ãææžã®ã³ã³ããã¹ãã§åŒã³åºããããã®ææžã®éžæã«åœ±é¿ãäžããããšãããã å ·äœçã«ã¯ãã¢ã¯ãã£ããªããããå®çŸ©ããç¯å²ããçŸåšã®éžæã決å®ããããšãããããããããã®éžæã®æŽæ°ã¯ãããŒãžå æ€çŽ¢ããã»ã¹ã®ããŸããŸãªæç¹ã§çºçããããšãããïŒããšãã°ãããŒãžå æ€çŽ¢ã€ã³ã¿ãŒãã§ã€ã¹ã®çµäºæããŸãã¯ã¢ã¯ãã£ããªãããã®ç¯å²ã®å€æŽæïŒã
å®è£ ã§å®çŸ©ãããïŒãããŠããããããã€ã¹åºæã®ïŒæ¹æ³ã§ããŠãŒã¶ãŒã¯ãŠãŒã¶ãŒãšãŒãžã§ã³ãã«éãèŠæ±ãéãããšãã§ãããããã¯ããŠãŒã¶ãŒããããããªãŒããŒãã¡ãã¥ãŒããã€ã¢ãã°ãããã«ãŒã衚瀺ã¢ãŒããªã©ãçŸåšç»é¢ã«è¡šç€ºãããŠãããã®ãéãããããšã瀺ãã
éãèŠæ±ã®äŸã次ã«ç€ºãïŒ
ãã¹ã¯ããããã©ãããã©ãŒã ã®EscããŒã
Androidãªã©ã®ç¹å®ã®ã¢ãã€ã«ãã©ãããã©ãŒã ã§ã®æ»ããã¿ã³ãŸãã¯ãžã§ã¹ãã£ãŒã
iOS VoiceOverã®2æ¬æã¹ã¯ã©ã"z"ãžã§ã¹ãã£ãŒãªã©ãæ¯æŽæè¡ã®åãæ¶ããžã§ã¹ãã£ãŒã
DualShockã²ãŒã ãããã®äžžãã¿ã³ãªã©ãã²ãŒã ã³ã³ãããŒã©ãŒã®æšæºçãª"æ»ã"ãã¿ã³
Whenever the user agent receives a potential close request targeted at a Document document, it must queue a global task on the user interaction task source given document's relevant global object to perform the following close request steps:
If document's fullscreen element is not null:
Fully exit fullscreen given document's node navigable's top-level traversable's active document.
Return.
This does not fire any relevant event, such as keydown; it only causes fullscreenchange to be eventually fired.
Optionally, skip to the step labeled alternative processing.
For example, if the user agent detects user frustration at repeated close request interception by the current web page, it might take this path.
Fire any relevant events, per UI Events or other relevant specifications. [UIEVENTS]
An example of a relevant event in the UI Events model would be the keydown event that UI Events suggests firing when the user presses the Esc key on their keyboard. On most platforms with keyboards, this is treated as a close request, and so would trigger these close request steps.
An example of relevant events that are outside of the model given in UI Events would be assistive technology synthesizing an Esc keydown event when the user sends a close request by using a dismiss gesture.
Let event be null if no such events are fired, or the Event object representing one of the fired events otherwise. If multiple events are fired, which one is chosen is implementation-defined.
If event is not null, and its canceled flag is set, then return.
If document is not fully active, then return.
This step is necessary because, if event is not null, then an event listener might have caused document to no longer be fully active.
Let closedSomething be the result of processing close watchers on document's relevant global object.
If closedSomething is true, then return.
Alternative processing: Otherwise, there was nothing watching for a close request. The user agent may instead interpret this interaction as some other action, instead of interpreting it as a close request.
EscããŒãæŒãããšãéãèŠæ±ãšããŠè§£éããããã©ãããã©ãŒã ã§ã¯ããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãããŒãæŒãããŠããdownããããŒãé¢ãããŠããã®ã§ã¯ãªããéãèŠæ±ãšããªããã°ãªããªãããããã£ãŠãäžèšã®ã¢ã«ãŽãªãºã ã§ã¯ãçºçãã"é¢é£ã€ãã³ã"ã¯åäžã®keydownã€ãã³ãã§ãªããã°ãªããªãã
EscãéãèŠæ±ã§ãããã©ãããã©ãŒã ã§ã¯ããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãŸããé©åã«åæåãããkeydownã€ãã³ããçºç«ããããŠã§ãéçºè
ãpreventDefault()ãåŒã³åºããŠã€ãã³ãããã£ã³ã»ã«ããå Žåããã以éã¯äœãèµ·ãããªããããããã€ãã³ãããã£ã³ã»ã«ãããã«çºçããå ŽåããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ã¯ããŒãºãŠã©ããã£ãŒã®åŠçã«é²ãã
æ»ããã¿ã³ãæœåšçéãèŠæ±ã§ãããã©ãããã©ãŒã ã§ã¯ãã€ãã³ãã¯é¢ä¿ããªããããæ»ããã¿ã³ãæŒããããšããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯çŽæ¥ã¯ããŒãºãŠã©ããã£ãŒ ã®åŠçã«é²ããã¢ã¯ãã£ããªã¯ããŒãºãŠã©ããã£ãŒãååšããå Žåããããããªã¬ãŒããããååšããªãå ŽåããŠãŒã¶ãŒãšãŒãžã§ã³ãã¯ãå¥ã®æ¹æ³ã§ãäŸãã°ã-1ã®ãã«ã¿ã«ããå±¥æŽã®ãã©ããŒã¹èŠæ±ãšããŠãæ»ããã¿ã³ã®æŒäžãè§£éããããšãã§ããã
Each Window has a close watcher manager, which is a struct with the following items:
Groups, a list of lists of close watchers, initially empty.
Allowed number of groups, a number, initially 1.
Next user interaction allows a new group, a boolean, initially true.
Most of the complexity of the close watcher manager comes from anti-abuse protections designed to prevent developers from disabling users' history traversal abilities, for platforms where a close request's fallback action is the main mechanism of history traversal. In particular:
The grouping of close watchers is designed so that if multiple close watchers are created without history-action activation, they are grouped together, so that a user-triggered close request will close all of the close watchers in a group. This ensures that web developers can't intercept an unlimited number of close requests by creating close watchers; instead they can create a number equal to at most 1 + the number of times the user activates the page.
The next user interaction allows a new group boolean encourages web developers to create close watchers in a way that is tied to individual user activations. Without it, each user activation would increase the allowed number of groups, even if the web developer isn't "using" those user activations to create close watchers. In short:
Allowed: user interaction; create a close watcher in its own group; user interaction; create a close watcher in a second independent group.
Disallowed: user interaction; user interaction; create a close watcher in its own group; create a close watcher in a second independent group.
Allowed: user interaction; user interaction; create a close watcher in its own group; create a close watcher grouped with the previous one.
This protection is not important for upholding our desired invariant of creating at most (1 + the number of times the user activates the page) groups. A determined abuser will just create one close watcher per user interaction, "banking" them for future abuse. But this system causes more predictable behavior for the normal case, and encourages non-abusive developers to create close watchers directly in response to user interactions.
To notify the close watcher manager about user activation given a Window window:
Let manager be window's close watcher manager.
If manager's next user interaction allows a new group is true, then increment manager's allowed number of groups.
Set manager's next user interaction allows a new group to false.
A close watcher is a struct with the following items:
A window, a Window.
A cancel action, an algorithm accepting a boolean argument and returning a boolean. The argument indicates whether or not the cancel action algorithm can prevent the close request from proceeding via the algorithm's return value. If the boolean argument is true, then the algorithm can return either true to indicate that the caller will proceed to the close action, or false to indicate that the caller will bail out. If the argument is false, then the return value is always false. This algorithm can never throw an exception.
A close action, an algorithm accepting no arguments and returning nothing. This algorithm can never throw an exception.
An is running cancel action boolean.
A get enabled state, an algorithm accepting no arguments and returning a boolean. This algorithm can never throw an exception.
A close watcher closeWatcher is active if closeWatcher's window's close watcher manager contains any list which contains closeWatcher.
To establish a close watcher given a Window window, a list of steps cancelAction, a list of steps closeAction, and an algorithm that returns a boolean getEnabledState:
Assert: window's associated Document is fully active.
Let closeWatcher be a new close watcher, with
Let manager be window's close watcher manager.
If manager's groups's size is less than manager's allowed number of groups, then append « closeWatcher » to manager's groups.
Otherwise:
Set manager's next user interaction allows a new group to true.
Return closeWatcher.
To request to close a close watcher closeWatcher with boolean requireHistoryActionActivation:
If closeWatcher is not active, then return true.
If the result of running closeWatcher's get enabled state is false, then return true.
If closeWatcher's is running cancel action is true, then return true.
Let window be closeWatcher's window.
If window's associated Document is not fully active, then return true.
Let canPreventClose be true if requireHistoryActionActivation is false, or if window's close watcher manager's groups's size is less than window's close watcher manager's allowed number of groups, and window has history-action activation; otherwise false.
Set closeWatcher's is running cancel action to true.
Let shouldContinue be the result of running closeWatcher's cancel action given canPreventClose.
Set closeWatcher's is running cancel action to false.
If shouldContinue is false:
Assert: canPreventClose is true.
Consume history-action user activation given window.
falseãè¿ãã
Note that since these substeps consume history-action user activation, requesting to close a close watcher twice without any intervening user activation will result in canPreventClose being false the second time.
Close closeWatcher.
Return true.
To close a close watcher closeWatcher:
If closeWatcher is not active, then return.
If the result of running closeWatcher's get enabled state is false, then return.
If closeWatcher's window's associated Document is not fully active, then return.
Destroy closeWatcher.
Run closeWatcher's close action.
To destroy a close watcher closeWatcher:
To process close watchers given a Window window:
Let processedACloseWatcher be false.
If window's close watcher manager's groups is not empty:
Let group be the last item in window's close watcher manager's groups.
For each closeWatcher of group, in reverse order:
If the result of running closeWatcher's get enabled state is true, set processedACloseWatcher to true.
Let shouldProceed be the result of requesting to close closeWatcher with true.
If shouldProceed is false, then break.
If window's close watcher manager's allowed number of groups is greater than 1, decrement it by 1.
Return processedACloseWatcher.
CloseWatcherã€ã³ã¿ãŒãã§ã€ã¹[Exposed =Window ]
interface CloseWatcher : EventTarget {
constructor (optional CloseWatcherOptions options = {});
undefined requestClose ();
undefined close ();
undefined destroy ();
attribute EventHandler oncancel ;
attribute EventHandler onclose ;
};
dictionary CloseWatcherOptions {
AbortSignal signal ;
};
watcher = new CloseWatcher()watcher = new CloseWatcher({ signal })æ°ããCloseWatcherã€ã³ã¹ã¿ã³ã¹ãäœæããã
signalãªãã·ã§ã³ãäžããããå ŽåãäžããããAbortSignalãã¢ããŒãããããšã§ãwatcherãç Žæ£ã§ããïŒããããwatcher.destroy()ã®ããã«ïŒã
ããããã®close watcherããã§ã«ã¢ã¯ãã£ãã§ããããã€Window>ãhistory-action activationãæããªãå ŽåãçµæãšããŠçããCloseWatcherã¯ãclose requestã«å¿çããŠããã§ã«ã¢ã¯ãã£ããªclose watcherãšãšãã«éãããããïŒãã®ãã§ã«ã¢ã¯ãã£ããªclose watcherã¯ãå¿
ãããCloseWatcherãªããžã§ã¯ãã§ããå¿
èŠã¯ãªããã¢ãŒãã«dialogèŠçŽ ããŸãã¯popover屿§ããã€èŠçŽ ã«ãã£ãŠçæãããããããªãŒããŒã§ããå¯èœæ§ããããïŒ
watcher.requestClose()æåã«cancelã€ãã³ããçºç«ããããã€ãã®ã€ãã³ããpreventDefault()ã§ãã£ã³ã»ã«ãããªãå Žåãããããwatcher.destroy()ãåŒã³åºããããã®ããã«éãããŠã©ããã£ãéã¢ã¯ãã£ãåããåã«closeã€ãã³ããçºç«ããããããã«ãããããããclose requestãwatcherãã¿ãŒã²ãããšããŠéä¿¡ããããã®ããã«åäœããã
ããã¯ããã£ã³ã»ã«ããã³ã¯ããŒãºããžãã¯ãcancelããã³closeã€ãã³ããã³ãã©ãŒã«çµ±åããããã«äœ¿çšã§ãããã«ããŒãŠãŒãã£ãªãã£ã§ãããéclose requestã®ãã¹ãŠã®ã¯ããŒãºã¢ãã©ãŒãã³ã¹ã§ãã®ã¡ãœãããåŒã³åºãããšãã§ããã
watcher.close()å³åº§ã«closeã€ãã³ããçºç«ããã ããããwatcher.destroy()ãåŒã³åºããããã®ããã«ã¯ããŒãºãŠã©ããã£ãŒã忢ãããã
ããã¯ãcancelã€ãã³ããã³ãã©ãŒå
ã®ããžãã¯ãã¹ãããããŠã closeã€ãã³ããã³ãã©ãŒãžã®çµäºããžãã¯ãããªã¬ãŒããããã«äœ¿çšã§ãããã«ããŒãŠãŒãã£ãªãã£ã§ããã
watcher.destroy()watcherã忢ãããcloseã€ãã³ããåãåããªãããã«ããæ°ããç¬ç«ããCloseWatcherã€ã³ã¹ã¿ã³ã¹ãæ§ç¯ã§ããããã«ããã
ããã¯ãé¢é£ããUIèŠçŽ ãéãããã以å€ã®æ¹æ³ã§åè§£ãããå Žåã«åŒã³åºãããããšãç®çãšããã
Each CloseWatcher instance has an internal close watcher, which is a close watcher.
The new CloseWatcher(options) constructor steps are:
If this's relevant global object's associated Document is not fully active, then throw an "InvalidStateError" DOMException.
Let closeWatcher be the result of establishing a close watcher given this's relevant global object, with:
cancelAction given canPreventClose being to return the result of firing an event named cancel at this, with the cancelable attribute initialized to canPreventClose.
closeAction being to fire an event named close at this.
getEnabledState being to return true.
Set this's internal close watcher to closeWatcher.
The requestClose() method steps are to request to close this's internal close watcher with false.
The close() method steps are to close this's internal close watcher.
The destroy() method steps are to destroy this's internal close watcher.
äžèšã¯ãCloseWatcherã€ã³ã¿ãŒãã§ã€ã¹ãå®è£
ãããã¹ãŠã®ãªããžã§ã¯ãã«ãã£ãŠãã€ãã³ããã³ãã©ãŒIDL屿§ãšããŠããµããŒããããã€ãã³ããã³ãã©ãŒïŒããã³å¯Ÿå¿ããã€ãã³ããã³ãã©ãŒã€ãã³ãåïŒã§ããïŒ
| ã€ãã³ããã³ãã©ãŒ | ã€ãã³ããã³ãã©ãŒã€ãã³ãå |
|---|---|
oncancel | cancel |
onclose | close |
ãŠãŒã¶ãŒãæå®ããéããèŠæ±ãšéãããã¿ã³ãæŒããããšãã«èªåçã«éããã«ã¹ã¿ã ããã«ãŒã³ã³ãããŒã«ãå®è£
ããå Žåãæ¬¡ã®ã³ãŒãã¯ãCloseWatcher APIã䜿çšããŠéããèŠæ±ãåŠçããæ¹æ³ã瀺ãïŒ
const watcher = new CloseWatcher();
const picker = setUpAndShowPickerDOMElement();
let chosenValue = null ;
watcher. onclose = () => {
chosenValue = picker. querySelector( 'input' ). value;
picker. remove();
};
picker. querySelector( '.close-button' ). onclick = () => watcher. requestClose();
éžæãããå€ãåéããããã®ããžãã¯ããCloseWatcherãªããžã§ã¯ãã®closeã€ãã³ããã³ãã©ãŒã«éäžãããŠããããšã«æ³šæãããéãããã¿ã³ã®clickã€ãã³ããã³ãã©ãŒã¯ãrequestClose()ãåŒã³åºãããšã«ãã£ãŠããã®ããžãã¯ã«å§ä»»ãããã
CloseWatcherãªããžã§ã¯ãã®cancelã€ãã³ãã䜿çšãããšãcloseã€ãã³ãã®çºç«ããã³CloseWatcherã®ç Žæ£ãé²ãããšãã§ãããäžè¬çãªäœ¿çšäŸã次ã«ç€ºãïŒ
watcher. oncancel = async ( e) => {
if ( hasUnsavedData && e. cancelable) {
e. preventDefault();
const userReallyWantsToClose = await askForConfirmation( "Are you sure you want to close?" );
if ( userReallyWantsToClose) {
hasUnsavedData = false ;
watcher. close();
}
}
};
äžæ£äœ¿çšé²æ¢ã®ããããã®ã€ãã³ãã¯ãããŒãžã«history-action activationãããå Žåã«ã®ã¿ cancelableã«ãªããããã¯ãæå®ãããéããèŠæ±ã®åŸã«å€±ããããããã«ããããŠãŒã¶ãŒã«ããã¢ã¯ãã£ãåãä»åšããªãç¶æ
ã§ãŠãŒã¶ãŒãéããèŠæ±ã2åç¶ããŠéä¿¡ããå ŽåãèŠæ±ã¯ç¢ºå®ã«æåããã2åç®ã®èŠæ±ã¯ãcancelã€ãã³ããã³ãã©ãŒã«ããpreventDefault()ã®åŒã³åºã詊è¡ãç¡èŠããCloseWatcherã®çµäºã«é²ãã
äžèšã®2ã€ã®äŸãçµã¿åããããšãrequestClose()ãš close()ã®éããããããéãããã¿ã³ã®clickã€ãã³ããã³ãã©ãŒã§requestClose()ã䜿çšããã®ã§ããã®ãã¿ã³ãã¯ãªãã¯ãããšCloseWatcherã®cancelã€ãã³ããããªã¬ãŒãããä¿åãããŠããªãããŒã¿ãããå Žåã¯ãŠãŒã¶ãŒã«ç¢ºèªãæ±ããå¯èœæ§ããããclose()ã䜿çšããå Žåããã®ãã§ãã¯ã¯ã¹ããããããããããé©åãªå Žåãããããéåžžã¯requestClose()ã®æ¹ãããŠãŒã¶ãŒãããªã¬ãŒããéããèŠæ±ã«é©ããŠããã
cancelã€ãã³ãã«å¯Ÿããuser activationå¶éã«å ããŠã CloseWatcheræ§æç©ã®ããã®ããå·§åŠãªåœ¢åŒã®ãŠãŒã¶ãŒã¢ã¯ãã£ããŒã·ã§ã³ã²ãŒãã£ã³ã°ãããããŠãŒã¶ãŒãã¢ã¯ãã£ãåããã«è€æ°CloseWatcherãäœæããå Žåãæ°ããäœæããããã®ã¯ãæåŸã«äœæããããã® close watcherãšäžç·ã«ã°ã«ãŒãåãããããã1ã€ã®éãèŠæ±ã§äž¡æ¹ãéããããïŒ
window. onload = () => {
// This will work as normal: it is the first close watcher created without user activation.
( new CloseWatcher()). onclose = () => { /* ... */ };
};
button1. onclick = () => {
// This will work as normal: the button click counts as user activation.
( new CloseWatcher()). onclose = () => { /* ... */ };
};
button2. onclick = () => {
// These will be grouped together, and both will close in response to a single close request.
( new CloseWatcher()). onclose = () => { /* ... */ };
( new CloseWatcher()). onclose = () => { /* ... */ };
};
ã€ãŸãã destroy()ãclose()ãŸãã¯requestClose()ãé©åã«åŒã³åºãããšãéèŠã§ãããããããããšããã°ã«ãŒãåãããŠããªããããªãŒãã®ã¯ããŒãºãŠã©ããã£ãŒã¹ããããåãæ»ãå¯äžã®æ¹æ³ã§ããããŠãŒã¶ãŒã®ã¢ã¯ãã£ãåãªãã«äœæããããã®ãããªã¯ããŒãºãŠã©ããã£ãŒã¯ãã»ãã·ã§ã³ã®éã¢ã¯ãã£ãã¿ã€ã ã¢ãŠããã€ã¢ãã°ãããŠãŒã¶ãŒã®ã¢ã¯ãã£ãåã«å¿çããŠçæãããªããµãŒããŒããªã¬ãŒã€ãã³ãã®ç·æ¥éç¥ãªã©ã®å Žåã«åœ¹ç«ã€ã