What is the recommended way to implement accessibility to copy text from within a <p> element?
For example,
<p class='text'>Some text to copy</p>
The <p> element is a inserted into DOM via AJAX call. What ARIA tags needs to be applied so that when it is being generated and inserted it becomes accessible to the user to copy easily.
All ideas appreciated.
There are at least two good ways to do this:
Make your <p> a <textarea readonly> instead. Thus a user would freely navigate through the text in the textarea if he/she wants, and he/she is also able to copy everything at once just by pressing Ctrl+A.
You can place a «Copy to clipboard» link or button. There is an IE-only solution with window.clipboardData, however in 2014 this is kinda ridiculous because blind users (among others) use different browsers, including (but not restricting to) IE, Firefox, Chrome, and Safari.
However, I saw on different websites a button implemented using Flash. So you can use this if you manage to deal with it.
You can see more info about the flash solution in the first answer to this question and following the links provided there.
I did not remove <p> but ended up using a <input> under <p> with z-index:-1;. It solved two problems for me:-
Keeping focus on the newly inserted role=dialog modal.
Kept the text selected for a challenged user to copy.
I am sure there are better ways to do it. But for now it works for me.
Related
Background
I have a basic CRUD form/webapp. It happens to be react/redux but for our purposes it doesn't matter much. I'm pretty sure this is an HTML question.
The form itself represents a 'legal document' a bit, and multiple users log in to view/edit it at once. (think kinda google docs ish)
Some users can only view, some can edit.
The Problem
I want my edit users to be able to use the form elements (input/select etc) to modify the data, and my view users to see that same data as similarly as possible.
I want my view users to be able to copy and paste from the screen.
The disabled and readOnly flags won't quite work.
Failed Solutions
Disabled: With a little CSS magic is looks perfect, and the view users don't get onclick reactions they shouldn't. BUT you can't copy and paste the text. This is the current state of the app.
ReadOnly: Isn't supported by many of the inputs I have (select, radio, etc) although it's pretty much perfect for text and texarea.
The Question
Is there a reasonable or elegant way to achieve behaviour like ReadOnly but across all HTML elements?
Clarifications
Since the current view of the page is exactly what I want my view users to see (it's made to look like a paper form a little) If I chose to use 'view mode' spans for my components or a 'view page' mode I would end up having a to make them look as much like my current inputs as possible. It feels weird/bad to try and make a precise recreation of what I have out of spans and divs instead of making what I have behave correctly. Still... it's the backup plan.
We are using all kinds of inputs. Selects and dates and checkboxes oh my. Text and Texarea are well behaved, but the rest get less well behaved.
Readonly propperty is only supported by input and textarea, check caniuse.
As it has been said in a comment, replace input elements by others that don't allow insert data and re-style the elements to look similar if that's what you want.
I've got a script that deals with pasted text in a text area. I would like to write some tests for it. The first step would be to copy some text in the clipboard so after reading a lot about the topic I ended up with something like this:
Add a text Area to the DOM with the text you want to copy.
Add a button to the DOM that runs document.execCommant("copy") on click.
Remove the text area & the button from the DOM.
Please take into account before marking this question as a duplicate, that all the other solutions I've seen involve the user performing the click action. I am asking about how to do this strictly programmatically.
document.execCommant("copy") does not work if it's not triggered by any user action due to security reasons. In my case, the tests are clicking on the button, but document.execCommant("copy") simply won't work.
Is there any way of doing this without using any new libraries? (jQuery is fine).
I am interested in a solution that works on Chrome/Firefox.
Here you can see a fiddle with the step I mentioned above: https://jsfiddle.net/7b40ma0q/
I have a small templating webapp, where the authors can add placeholders within their richttext editor. To prevent errors I want to provide a list of valid placeholders which then can be copied and pasted. My problem here is the way I can restrict what get's copied.
I tried two approaches, both failed.
First of all how the list of placeholders looks like:
<ul class="placeholders">
<li>${address.name}</li>
<li>${address.street}</li>
<li>${address.city}</li>
<li>${address.zip}</li>
</ul>
Copy to clipboard with JS:
This doesn't work as the clipboard cannot be accessed because of security concerns. I tried the ZeroClipboard but it's documentation is not clear for me and even the examples I found here at SO weren't helpful. I want to copy the content of the <li> if the user clicks on it. I tried to set instantiate with new ZeroClipboard(jQuery('ul.placeholders li'). But this didn't work at all. In Firefox as soon as I hover over an li the loading wheel appears.
Just select the whole text with a range object:
This basically works with the selection, but when I paste it in the Rich Text Editor, Firefox und IE also paste the li tag. Again as I don't have access to the clipboard I can't control, what gets copied. And as it is a RTE, I don't have much control over how it gets pasted.
Has anyone an idea on how I could make either of the approaches work?
I am using dijit.form.Select as a replacement for the HTML SELECT.
I am unable to get it to allow me to select an item purely by typing as you can with the HTML version. Ie, if you have a list of US states you can hit C several times to select Conneticut. What am I missing? TIA
And yet, it works on the web page below....
http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test%5FSelect.html
When designing a select element that is visually consistent with a UI theme, CSS is often not powerful enough to completely control the look of select element, as some browsers treat CSS stylings on a select element differently. So the next best thing for many is to develop a faux-select with javascript so that way you have a better looking select element.
What you're left with is something that looks like a select element, but isn't, and the real select is hidden nearby, typically.
That means that there is a good possibility that when the developer was making that javascript version of the select element, they didn't do their diligence to at least program the minimum features that come native with the HTML version. (after all, it would be a lot of work to do string searching and sorting on a keyup event... and i'm not surprised they didn't do it)
to add insult to injury, sometimes the plugin actually allows for the change event on the native select to still be focused beneath the surface, which is why your typing works sometimes.
A chap named Bob Tarling has solved my problem. Much obliged Bob!!
See this link for his solution http://dojo-toolkit.33424.n3.nabble.com/Sharing-a-solution-for-type-ahead-in-Select-and-help-request-to-adapt-tt3995899.html#none
I want to know if it is possible to select the text anywhere on a webpage and then copy it using jQuery or Javascript.In another language how to invoke CTRL+X,CTRL+C and CTRL+V on a selected text using jQuery or Javascript?.Can this be done?However the CUT command will be invoked on the text which is present in a textarea or textbox not on the hypertext of the webpage. Please let me know.
You could probably invoke the buttons, and copying text on a webpage is most certainly possible with access to the DOM, however it seems like what you are trying to do is access the clipboard, and the way to do that consistently is usually with flash.
The ZeroClipboard plugin is the one most commonly used, it's easy to integrate and gives you full access ro the clipboard.
For an example have a look at CSS3Please, I believe they are using the ZeroClipboard plugin.
Can this be done?
...
I don't want to use Flash
No, not if you need it to work in all major browsers.