I had a terrible problem that over the past two days I have been brandishing my brain and have not yet come up with a solution. As such, I think that this requires someone smarter than me.
What I'm trying to create is a text box that mimics Facebook text; essentially a tagging function.
Now, if you used Facebook, you will notice that Facebook allows you to tag people in comments / posts by simply typing their name and selecting from the drop-down list. Then the name of the selected person will appear in the highlighted text in this very text box. I managed to create and populate the drop-down list with a combination of JQuery and AJAX, but the tag process itself is impudent.
After selecting an item from the drop-down list (by pressing Enter or pressing), the query text will be replaced with the name with the tag. Now it’s hard to understand how you can select text in the text area of any kind of selection, so I found (by checking the elements in Google Chrome and deleting the node text field) that the text field itself is transparent and there is a white div below the “imitating” text. Highlighted words are placed in a custom CSS tag that gives it a blue background. I discovered all this myself, and I successfully simulated this, but I can only make one tag.
Now I explored further and found the input element = "hidden" element of the "mentionHidden" class. This input element has a value attribute that is dynamically populated based on the contents of the text field. Therefore, if I typed "ABC", the value of the item will become "ABC". If I included the tag, say "hello [Ray]!" (where the name in [] is the tag), the value of the element becomes "hi @ [member_id: Rei]!".
So, I did my homework. But here is the part that I cannot understand.
I can’t understand exactly how to dynamically populate a hidden input element with the value of a text field. Obviously, the base div giving the background of the blue tags is populated from the input element. But the input element gives me a headache.
You see, I can not do the following:
- "" "" , ( , ).
- ( , , ), . 10 , "" String.
- "" , , String .
, , , , . , contenteditable, HTML5 .
,