Comments (6)
A focused selection is always visible. In this case we have a visible but unfocused selection.
Users expect effective CTRL+C/V/P anytime a selection is visible? In this case, users can't know if the selection is focused or not. They see a blue selection so they expect interaction with it?
To fulfill that expectation, maybe CTRL+C/V/P should move focus to a visible&&unfocused selection? Hmm, could be complicated; the focus move would need to be done after any ClipboardEvent handler has had a chance to cancel the default operation => ClipboardEvents must target the visible selection.
Either way, I think it is safe to spec:
"Set target to be the element that contains the start of the visible selection in document order, or the body element if there is no visible selection or cursor"
from clipboard-apis.
I'm not sure if users expect effective cut/paste when there is unfocused visible selection. It can be confusing if cut/paste still modifies content of a contenteditable even though the user has explicitly moved the focus away.
And at least for Chrome, focused and unfocused selection have different appearance. In Chrome, a focused element has a light blue border. Hence, the user can tell whether selection is focused by checking if the selection is inside the light blue border or not.
from clipboard-apis.
As @xiaochengh pointed out when selection is greyed out this is the true case of loss of focus. Browser doesn't really takes away the focus when clicking on the checkbox in your example. Being in focus is still a requirement to effectively being able to insert into DOM (by the user, I mean).
Also, I am pretty sure all browsers send visual queues to the user if a selection is not in focus so there is not confusion to the user.
Perhaps, we could add an constrain to the first part of the statement - "...element that is in focus and contains the start of the visible selection in document order"
from clipboard-apis.
Browser doesn't really takes away the focus when clicking on the checkbox in your example.
Focus is moved to the checkbox according to document.activeElement... but the (now unfocused) selection can still be copied with CTRL+C.
And at least for Chrome, focused and unfocused selection have different appearance. In Chrome, a focused element has a light blue border. Hence, the user can tell whether selection is focused by checking if the selection is inside the light blue border or not.
Ah yes! True that. I didn't think about that "focus-box". I just saw the blue selection. The selection is unfocused but can still be copied with CTRL+C so it makes sense that it is blue even tough it is outside of the focus-box. In this case, what should be the copy ClipboardEvent's target? Answer: the selected element (not document.body). All browsers do this already.
If we say,
"...element that is in focus and contains the start of the visible selection in document order"
In the checkbox-case, the selection is not in focus (if you ask document.activeElement) => The copy event would target document.body and not the selected element (wrong). That's why I think it's better if we use the word "visible". The word "focus" can be a little bit ambiguous in this context?
from clipboard-apis.
Note that on macOS & iOS, there is no distinction between selection & focus. Focus always moves to wherever selection is last set by the user.
from clipboard-apis.
Now that the spec update has landed, let's close this?
from clipboard-apis.
Related Issues (20)
- Undefined behaviour when handling data promise resolved value HOT 2
- Why does the Clipboard interface extends EventTarget?
- Broken references in Clipboard API and events
- Web Platform tests using "clipboard-read" HOT 2
- Async Clipboard API take more time compared to DataTransfer API to read/write data in System Clipboard HOT 1
- Read Blob data for the supported formats on-demand during getType. HOT 11
- Start and End fragment tags in text/html format on Windows HOT 1
- Add method `match` (`clipboard.match(regex)`) to check clipboard for pattern matching before reading - as it is done in iOS HOT 1
- Optional data types description seems wrong HOT 1
- Feature detection of web custom format support HOT 1
- Parallelism and task sources HOT 2
- algorithms don't enforce focus requirement
- Aljbore HOT 1
- References to permissions
- Topic: ‘unsanitized’ option to allow developers to opt-out of UA-provided sanitization HOT 1
- Merge a PR only with explicit implementor consensus (followup) HOT 4
- read(formats) ambiguous
- RTF is not exposed when using navigator.clipboard.read()
- `supports` should take a dictionary instead of a DOMString as argument for readability HOT 2
- [Async Clipboard API] Use Stream APIs to provide data during write HOT 10
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from clipboard-apis.