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.
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 don't know if this is possible in Javascript but I am trying to achieve this. I don't know the terminology so I thought I would post it on here with pseudo code to help you understand what I want to implement.
Pseudo Code:
User Selects Option from pull down.
If selection matches criteria
Add text boxes to the form
Else if selection is something else
Add invisible text box with NULL value
I would like to code it myself but if you could post some reference material or links as I have not done much with Javascript.
Thanks
For your first and second entries, google for 'html select onchange'.
You'll want to check out document.createElement for "Add text boxes to the form"
To make your text box invisible, check out the CSS display property, setting it to none or block (or inline)
I've tried to keep this answer very short without code samples because it sounds like you want to do it yourself. Add a comment to my answer if you want more of an example.
EDIT
Also of note, along with document.createElement, you will want to look at appendChild to add the created element to an HTML element, most likely some FORM element in your page.
Ok this is my problem: I want produce a rich text editor when a user can make changes to a large block of text. I then want to be able to identify not only what parts of the document were changed, but most importantly the character index at which these changes happened.
By knowing what was changed I want to be able to replicate those exact changes to a clone of the original document.
I have looked briefly into:
http://code.google.com/p/google-diff-match-patch/
http://ejohn.org/projects/javascript-diff-algorithm/
http://en.wikipedia.org/wiki/User:Cacycle/diff.js
Does anyone know the best way to go about this?
P.S. I know it sounds like a complicated requirement but for what I am building it is neccessary.