Is there any easy way or plugin to allow users to select (with their mouse) multiple parts of a text on my page?
I know that using window.getSelection().toString() I can get the current selection, but I'd like to allow the user to highlight multiple parts of the text and be able to know what pieces they highlighted.
Something like the picture below:
The general idea is to allow the users to create keywords/key expressions directly from the text
Found one that does exactly what I want (+it's compatible with really old browsers)
https://github.com/mir3z/texthighlighter
Related
I've been having trouble finding a solution to this problem. I'm adding scripting to a PDF form for my job, and my goal is to be able to highlight all 3 rows to allow for easy copying, but also keep the work description as the prepare form text elements so I'm able to interact with it via JavaScript.
The issues I've encountered are that if it's multiple text elements, then I've been unable to find a way to highlight the text in all 3 to allow for copying. Or another issue being that the multi-line text box seems to be much larger than where the text will appear, thus moving into other text lines of the form.
Here is how the area looks in preview mode
Here is how it looks in edit mode (Prepare Form)
The only features I want for sure is to be able to copy the entire work description easily, and to keep the work description as an element that JavaScript can interact with.
I'm working on a Chrome Extension which I want to replace certain characters in a specific text field on one specific website. It is basically to change emoticon text (like ":-D") into the proper emoji's, such as "😄". I tried a few things I found online (I'm not very good with JS):
- A MutationObserver and then look for all text fields with a certain name, then replace all emoticons by hand. Didn't really do the job properly and also kept firing up the print window for some reason
- Event listener added with event 'keyup' but it doesn't seem to fire up.
Hope you guys know a good solution!
This question does not give anywhere near enough information to answer. Are you using the program for input fields on the website? What solutions have you tried? Where is the code? Essentially, you are asking us to write the entire program for you. This forum is meant for programming help, NOT doing the entire program for you. You need to fix the question to be more specific.
If you just want to replace text elements, you would have to use the select elements by tag name to select all text elements on the page and then search through each of these for the sets of emoticons. Once finding these, you would have to change the elements inner html to fit the emoticon from UTF-8.
I have a notepad file of about 10,000 words. I can export them as csv or tab separated values as required. Is there a way for my words to appear as suggestions in a textbox (input type text)?
This word work in the same way as google.
In HTML5 you have the datalist element which gives you a kind of autocomplete feature. Although I'm not really sure about what you want an answer to, for example it is probably not that efficient to put 10 000 words inside the datalist element.
You can use jquery along with some plugin for maximum cross-browsing capability.
Here is an example of what you are trying to achieve http://jqueryui.com/autocomplete/
Click on the vew source link on the page to see how it is done.
Edit:
Since you are using a lot of elements, why not creating an ajax request after the text change to load the elements you want and then stream them into a div right under the text box? This will make you more in control of what the user is seing and it will work on all browsers.
I'm looking for a rich text editor that allows for locking regions so that they can't be edited by the user. These locked regions would contain markup, not just plain text. TinyMCE has a plugin to support this but it is quite buggy.
Rather than having the RTE contain the content you don't want edited, why not just put multiple editors around only the areas you want users to edit?
The problem I see with doing it the other way is that you could have individual nodes within the editable text with contenteditable off, but those nodes could still be part of a larger edit (e.g., they could be deleted). To truly prevent them being edited you'd have to check the current selection whenever it changed and disable all user actions until the selection didn't include the locked content. Even if you did that, it would be tricky to make sure that a user didn't add content in a place they weren't supposed to (before the first node, say, assuming the first node was locked).
How can I detect text selection from a text search using the browsers Ctrl+F.
For example, I want to make a FAQ, where are the items are closed (to remove clutter), and clicking them opens the text within them, but at the same time I don't want Ctrl+F to be broken.
So I'm thinking, is there a way for JavaScript to detect that I have searched for some text within a non visible (but selectable) block of text, and to automatically open it.
Is it even possible to detect text selection from a search with Ctrl+F? If so, how?
A more specific example: I have a div with the id of "one" and a div with the id of "two"
both have their own text:
<div id="one">Google is a search engine</div>
<div id="two">Stackoverflow users are very informative</div>
both have their text hidden from view but still selectable, but not by mouse (using margins or covering)
So a user searches for "Stackoverflow" on this page, I want to trigger a JavaScript function upon the search selection (how??), and I need the function that runs to know which div, with what ID has some text selected.
This is browser dependent. In Chrome (maybe Webkit in general?), it seems to use a selection that is separate from the one in the DOM API.
However, Firefox will use the DOM selection when highlighting text from a Ctrl+F.
For example, go to google.com, and type this in Firebug:
window.getSelection().toString()
This will return ""
Now do a Ctrl+F, type in Privacy, press enter.
Enter the above command again in Firebug, and you will get:
"Privacy"
As far as I know, there is no way. The content of the search field entirely under the control of the browser, and you can't access this from within the page.
What you might be able to do however, is detect a selection in the document and react to that. This will however probably produce many false positives (because you can't distinguish between an ordinary selection and a search), and it won't work with browsers that do not use an ordinary selection to highlight search results.
More info on detecting selections: Introduction to Range on Quirksmode
Why not make the FAQ search friendly and use a service for that. Google Custom Search Engine might be a good place to start.