Chrome extension on text changed event on text field, then replace text - javascript

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.

Related

Javascript: Checkboxes on Forms and output

I run a large Discord server and I'm making a channel for people to post template information about their online groups. To make complying with the template either, I've created a single HTML page which takes the information that goes in the template and regurgitates it into a box on the bottom of the page with some nice bolding and italics where needed already for copy/paste.
Unfortunately, I don't know Javascript so I'm just trying to piece things together and learning as I go. (I'm learning other languages but not this one in school.)
For some reason me trying to format code on here isn't working so I can't paste what I have so I'll just try and explain it.
I'm using oninput="groupNameFunction()" and I'm having the javascript grab the user entered data as they type it via grabbing the ID of the input field then regurgitating it out in the innerHTML of another element. And it works great.
But checkboxes (and probably radio buttons) don't work with oninput (for pretty obvious reasons) but I've been able to get onblur to work to some extent.
The problem is that I'm a beginning coder and I don't quite know or understand how I'll take all the results from all the checkboxes and regurgitate them out into a nice list when there are many IDs and many choices and it doesn't seem sensible to try and write all choices from a single thing into their own function, or how I'll handle the same thing with radio buttons.
I can't find any examples in stuff like W3 tutorials of this being done, it's probably that I just don't know the language to google it correctly.
Could someone point me in the right direction on how to make this work?
here's a little fiddle for you to play with. (press F12 to open developer tools and see console, you'll find logs there)
for radio and checkbox inputs you have change event, it triggers when user check and uncheck the box. bare in mind that you need to have same name="friendly-name" attribute on radio buttons in order them to work as expected.
for the "text" filed use input event.
don't add inline events in HTML, it's bad practice, add them via JS. from JS you can select all your inputs by ther class, name, tag name etc.. and add event handlers (you can find everything in the fiddle).
hope it helps. :D

Detecting and Managing Selected Text

I'm trying to write JavaScript that manages the text a user selects in a webpage, but I'm not sure where to begin; i.e., I was wondering if there was a way to limit the ability to select/highlight text so that the selection ends at a terminating punctuation mark, and the user cannot select anymore (And possibly trigger an alert window or send an event when that limit is first reached). Also, is there a way to change the colour of highlighted/selected text in a browser? I'm familiar with JavaScript pointer and click events, but I'm having trouble finding any information on what I'm looking for.
Thanks in advance.
You want to look at window.getSelection().getRangeAt(0);
I found this answer pretty useful when I was looking at that:
https://stackoverflow.com/a/12823606
The context there is specifically highlighting, but obviously once you have the text you can do other things with it.

Testbox auto complete from string

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.

Create a text input that changes smileys code to picture

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...).

Short-cut in textarea

I'm trying to write a text editor.
I'd need to:
be able to understand what text is selected so that a shortcut could work in the correct portion of text, just like in this editor, if I select a word in the middle of the text and then press Ctrl+B
Be able to catch when some keys are pressed like this Ctrl+B and TAB
Any hint?
Take a look at Reverse Engineering the WMD Editor. That's the editor used on SO and supports what you're referring to. The function that augments the current text selection as Bold is called doBorI(). Search for it in the source.
As for catching keyboard events, this page has a great primer on that, including detecting which key has been pressed.
Not sure what your specific question is exactly, but hopefully those are good starts.
I would suggest having a look at one of the existing editors to see how they handle this.
I recently started using: JWysiwyg, which has the advantage of being a very concise code-base and hence easier to decipher.

Categories