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 !
Related
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.
In my page i have a text input field and I want that when user writes code of a smileys (like :D) inside that field, input field changes that code to picture.
How can i do it?
I have came across this query earlier too. There is a chain going about the same query.
It doesnot look as easy as you are trying to potray. Writing and converting does not make sense at all.
APPROACH: You have to read each and every text entered by user if it matches the pattern of the smile and if the smiley matches then fetch the respective .gif from the images folder.
Please refer following link for a quick start.
Replace a list of emoticons with their images
This answer may be quite late, but this question still ranks high on Google...
The easiest way to add this feature ist to Use the SCEditor plugin (MIT licence). This is a JavaScript-and-CSS solution that pimps any textarea into a WYSIWYG editor. If the toolbar is disabled (see http://www.sceditor.com/documentation/options/), you result in a text input that automatically replaces emoticons with corresponding images.
Hint: It may be necessary to tell the script where to find the emoticons, using the emoticonsRoot option (took me 10 minutes to find that out - 10 of 30 minutes required from finding the SCEditor to making it work...).
I have to use a special form for work and the form has a comment section that is WAY too small (about 5 lines for 30+ lines of text) Since the developers don't update the software very often, I usually take the initiative to create bookmarklets that do what I want.
I'm trying to create a javascript line that extends the size of the textbox. I am taking this approach but it does not work:
javascript:document.getElementById("CommentArea").style.height="700px";
Form name is "Survey" if that helps.
Any ideas?
(Note: I'm trying to change the visual size, not the character limit.)
Textareas use the rows attribute to determine the number of visible text lines for the control:
​document.getElementById("test").rows = 20;​
EXAMPLE
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/