I am trying to create a highlighter in javascript that captures what text is selected and also highlights (changes text color and background). I am able to get to the point where it captures using mouseup/down (implemented using http://www.codetoad.com/javascript_get_selected_text.asp) but if I combine changing the colors (from http://www.nsftools.com/misc/SearchAndHighlight.htm), its not working and pages become unresponsive. I think since I am calling the 2nd script to change the colors from within the body tag, its not working properly. I have googled but am not able to find any solution that mixes both of the above 2 solutions.
what makes this slightly complicated is that I dont want the actions to be attached to a button, i.e. as soon as a text is selected, it should be saved in a variable and colored instantly, i.e. as soon as the mouse is lifted. I tried using CSS but it only works for the 1st highlight, i.e. as soon as you select another text, the 1st highlight is removed and the new text is highlighted....
Any help is greatly appreciated.
You could use a combination of the following two answers to do this:
https://stackoverflow.com/a/5887719/96100
https://stackoverflow.com/a/8713757/96100
Here's a demo: http://jsfiddle.net/E2bU6/
Related
Helo there!
I'm trying to figure out a simple way of doing multiline placeholders inside a textarea (or an alternative solution, more about that in the bottom) that only disappears when the row have changes. So, basically, if this is the initial state of the textarea (or whatever it can be)
Write a question here
Write another question here
Write the third question here
And the user clicks the first question and types A it would look like this:
A
Write another question here
Write the third question here
I've thought about three different solutions so far but not sure which one to prefer.
1) Have ghost content that is rendered separately from the area of text.
2) Instead of using a textarea, have one input per line that the textarea would be. Problem would be to implement textarea behavior but with many inputs instead. Having placeholders per line would be trivial though.
3) Have actual text and use a parser of some kind to add/remove text whenever that is needed.
Appreciate any help/pointers I can get.
I'm using React and Redux but I'm happy to get answers that are including other technologies that I can take inspiration from.
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'm trying to create an editable text field in a page which highlights the edits made by the user to the text as it is being edited. For instance, text inserted or changed by the user should appear against a colored background, deletions should be indicated by adding a colored background to the neighboring characters (or maybe some kind of symbol?)... It seems to be much harder than I thought to do this in Javascript, and I am surprised that I couldn't find any code already implementing such a text field.
Do you know of anything which implements what I'm looking for?
Thanks!
You should have a look at Google's Diff, Match and Patch libraries for Plain Text which are open source and available in JavaScript among other languages.
Diff demo.
Step1->
Store the original value in a variable V1
Step2->
Store the modified value in a variable V2
Step3->
For each word in V2 [word are divided by at least a single space] check it against the V1, if it's not same HIGHLIGHT it with HTML tag !
I'd like to take the selected text on screen (text highlighted with the mouse) and when a button is pushed wrap that text in a tag. I'd like to use jquery but if it can be done in another framework that would be fine too.
I haven't been able to figure out how to do this yet, so any thoughts are appreciated. Also I know you can run into issues if the text goes across several elements so for now case just assume the text highlighted is all contained in a tag.
Thanks!
Highlighting the selected text doesn't necessarily require you to wrap it. In fact, trying to wrap it is difficult if the range of the selection spans multiple tags (i.e. doesn't surround nicely closed tags).
Here's an answer that highlights the current selection without wrapping it: Javascript Highlight Selected Range Button.
He uses execCommand to let the browser highlight the current document selection for you. Pretty sweet.
Here is a post on working with selected text. The getSelection() method can be used to get the selected text, then you should be able to replace that text with text wrapped in a tag.
I would like to add to my site a on-hover/on-select dictionary. What are they usually called, so I can search on the web?
I am thinking in a piece of javascript code that detects which word the mouse is currently hovering/selecting and after some time it shows a baloon with the hovered word definition.
Using onMouseover for this could be very annoying to your users. The NYTimes website uses the selected text (highlighted by double-clicking a word or dragging to select) to display a bubble that, when clicked, opens a popup with a query on that word or term.
See http://graphics8.nytimes.com/js/common/screen/altClickToSearch.js.
Are you thinking of tooltips that display the definition? You can achieve this with a style sheet by adding alt tags and adding a style="cursor:help" attribute.
Alternatively you could use a tooltip library like these jQuery ones.