Create a text input that changes smileys code to picture - javascript

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

Related

Multiline placeholder that only disappears when row changes

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.

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

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.

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.

adding a text input field through js or jQuery when clicking on another input field in rails 3

I'm building a nested form in rails 3.1 and instead of pressing the "add" button i want to automaticly add an input field when typing text in an empty input field (just like making a question in facebook and adding poll options). But i also want to only add a field if there are characters typed in the field if the characters are removed the extra field should also be removed.
I am working with rails 3.1 and so jQuery and jquery-rails are included in my gem, i don't know coffee script yet.
it's really easy.
Just tap into the focus() event handler and add textboxes as you go along.
I have created a simple demo for you here: http://jsfiddle.net/mcVnN/
Warning: clicking any textbox will add a new textbox here. If you want to add new textbox ONLY on last textbox focus, just compare the id.
If you have any doubts let me know.
Cheers
--
Sorry, did not read your full question, my mistake.
I have put together some quick code http://jsfiddle.net/mcVnN/12/ again on jsfiddle, but you might want to change it to suit your needs.
I was going through my answers a now and realized I had left you in the middle of nowhere.
Took some time to completely re-write my answer - the above answer is a lot buggier, you are better off using the :last selector than manually trying to keep track of the last text box yourself.
See my rewrite here: http://jsfiddle.net/mcVnN/29/
I have also added a max text box count that you can change easily to configure how many textbox you want users to be able to add.
Please replace the above code with this one, if you are using the above one at all.
Thanks.

Highlight edits made to a text by the user in Javascript

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 !

Categories