User comment looks something like this:
<div id="comment23" class="commentholder">
<p>
This is a sample comment. It may contain different kinds of html.
like <strong>strong text</strong>
or anything that markdown supports.
</p>
</div>
When text in comment23 div is selected, I would like to display a button near it. If button is pressed I want to take the selected text, prepend ">" to each line (to make it blockquote in markdown) and paste it in an input box.
How can I achieve this in javascript, preferably jquery?
You'll need to read up on Selection objects. If you want to support IE < 9, which has a completely different selection API from other browsers, you'll need to read up about that too. You'll also need to simulate the selectionchange event, which exists in WebKit and IE but not Firefox and Opera.
I've answered all the constituent parts of this on SO before. Here's a couple of links:
How to bind a handler to a selection change on window?
how to get selection inside a div using jquery/javascript
Related
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.
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 have placed labels in my input fields to have explanatory text display in the background and when the user types in the field, the text disappears. I'm using the example explained here: How to create a label inside an <input> element?
and specifically at http://attardi.org/
When the password though is saved by the browser such as in Google chrome, the text becomes garbled as in this image (this is currently on my local computer):
The background text is not disappearing for saved passwords. Any help would be appreciative - thanks.
You could also take advantage of the new placeholder attribute. Read about it here.
No IE support, though.
Option 2 would be using Jquery. Since you're already using Jquery for the label solution, you could add code that checks the value of the input after the document has loaded then show or hide the label accordingly.
This code would go inside the document ready function:
$(function() {
// Handler for .ready() called.
});
Just use the placeholder attribute – it's so simple:
<input type="email" placeholder="email" />
Literally, that's it; the browser will take care of the behavior.
Yes, it won't work in IE (until IE10 is released) – but you've already got labels next to the fields anyway, so it's not like IE users won't be able to tell which fields are which.
I investigated further, and this only occurred in Google Chrome and not Mozilla Firefox. My setup was correct and looks like it might in fact be a bug in Chrome. See issue log: http://code.google.com/p/chromium/issues/detail?id=117661
This also looks like it will occur for the placeholder attribute too when Chrome tries to do password autosave process and doesn't look to see if there is a previous inputted value.
Thanks for the input from all.
I want to develop a Firefox extension that gets the selected text from a google word doc and replaces it with another text (any text).
If i inspect the selection with Firefox's InspectElement i find that the selection is a DIV with the class name = "kix-selection-overlay kix-overlay kix-unprintable kix-overlay-under-text" .
How do i get the text from the DIV and then modify it ? All the methods that worked in a normal webmail, even in a excel spreadsheet(google docs) failed to work in a google doc word document.
For now i just managed to obtain the element with :
var focusedElement = document.commandDispatcher.focusedElement;
Thank you a lot !
Alex!
The problem is that Google Docs has its own selection system, instead of using the Javascript range document it creates divs for every line that is selected behind the text. It does this so that collaborative users can have different colors for their selections and because the range object has annoyances with the way that it handles nested elements and offsets.
Google Docs would have an internal selection object as well as copy and paste functionality. You simply need to look through the code and find what methods are called by the oncopy and onpaste event handlers.
Ryan