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/
Related
I'm writing a chrome extension which helps the user type things on twitter. When writing a tweet on twitter, twitter opens an editable div container. When the user types into it, twitter (which is using some web-framework presumably) generates sub-divs and spans with the text the user types and places them within the content-editable div.
The thing is when one manually changes the span value (for instance, through inspect elements), and then types something again, the value in the span will just revert back to what it previously was (before the inspect elements edit). This is probably because the actually typed string is stored somewhere in javascript, and everything gets overwritten again when the user types into the div.
I've been trying to find a way around this using JQuery but with no success. I don't really know how to start. If it were just a regular input tag, you could call something like $("input").val("new value"), easy-peasy... but I don't know how one could go about doing that for an editable div that gets updated by javascript running somewhere on the page.
For a while, I just thought it would be impossible...
BUT NOW I do know it is possible. If you download the Grammarly extension and use the Grammarly popup-editor (which opens a new window to edit text), then submit that, the twitter editable-content div updates appropriately and everything works like magic.
Sorry if this isn't a standard programming question, but I couldn't find anything on the web that comes close to what I'm trying to do. Maybe I'm just not experienced enough and am missing something really obvious. I tried looking at the twitter and Grammarly source code but it's all minified garbled javascript that I can't read...
Thanks for any help and insight!
EDIT: the twitter url in question is: https://twitter.com/compose/tweet The div in question is the one with contenteditable="true" attribute (you can search it in the inspector)
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.
This very textbox I'm typing in on Stackoverflow uses Pagedown.js markdown to HTML conversion.
I'd like to use the Pagedown.js editor but only show the live preview HTML onclick rather than onkeyup. My reasoning is that for mobile devices the keyup-based parsing seems too taxing (SO itself doesn't use it) and it would provide just as nice a user experience to click a button to reveal the formatted text.
Is there any way to separate out editor.run() such that the button bar formatting (e.g., bracketing text with asterisks) and the live preview formatting can be uncoupled?
You can trigger the refresh by calling editor.refreshPreview() after calling editor.run(). However, the onkeyup event doesn't seem to be configurable. You can disable it by changing var startType = "delayed" to "manual" in Markdown.Editor.js.
Has anyone tried the LMC Button before? I initially wanted to use ZeroClipboard as it is the most popular script around for copy to clipboard function, but it just doesn't work in my wordpress for some reason. LMC button works perfectly except for one little flaw - it can only copy codes that are shown on page load.
This doesn't make sense for me as I have a dynamically generated message I need to copy to my clipboard. Go to the link above to check out his demo and you will find the same thing. Change the input and click 'copy', it will not copy what you typed.
On further note, I cannot use ctrl-c as I need to add some codes into the text before being copied. Please don't make this suggestion.
I am trying to sanitize a paste in a contentEditable div. That is, the code should look something like the following:
$('#content').bind('paste',function(e)
{
// Ensure pasted markup is valid
});
Ideally, I would be able to parse through the pasted text and re-format it in a way that is appropriate to the site, but I don't know how to do this.
Alternatively, I would be comfortable pasting as plain text (as opposed to HTML), but I don't know how to do this either.
I am slightly less comfortable with the solution of having a box pop up with a textarea, asking the user to paste into this text area and then putting the text into the content at the previous cursor position. I know how to do this, but want to avoid it.
And I am completely uncomfortable with just preventing the user from pasting by using e.preventDefault().
There is no direct way in most browsers to access the content pasted before it goes into the DOM. There is, however, a fairly elaborate way to do this that only works for pastes triggered by the keyboard. See my answer here:
JavaScript get clipboard data on paste event (Cross browser)
I've been able to achieve this with the rangy javascript library allowing me to save and restore the caret position after sanitizing the content.
https://github.com/timdown/rangy
Tested in chrome and safari.
$("#content").on('paste', function(){
sanitize();
});
function sanitize(){
setTimeout(function(){
var savedSelection = rangy.saveSelection();
$("#content *").removeAttr("style"); // Do your parsing here.
rangy.restoreSelection(savedSelection);
}, 0);
}
Could you not verify the content once it is already in the field some how? Let the content paste in, save the original content first and if the new content is not valid, replace it back with the old. It's just a theory but I'm just going to have to experiment too for now.