Question

I would like to create a similar system to the facebook status update using jQuery.

If you take a look at the guts of it, just a few elements below the What's on your mind? textarea tag, there is a hidden field…

<input type="hidden" autocomplete="off" class="mentionsHidden" name="xhpc_message" value="">

As you type a status into the textarea field, the value of this hidden field changes to match the status. However, if you tag someone into the status, the hidden field displays something like @[uid:User Name] in place of the users name, so that it can be turned into a hyperlink later on.

I have tried to recreate something similar myself, not with users, but with tags. http://jsfiddle.net/nickjackson/qh3QP/

When I type #fun into the first text area field, the second text area displays #[tag:fun] and the #fun tag becomes fun. This is all correct. However, when I then type something else, the square bracket disappears because the # tag is no longer in the status field. How can I solve this?

Ultimately, How can I create a textarea and hidden field combo, that works similarly to the facebook status update, and allows the use of tags?

Answer 1

I used 3 fields – one to type in, one to store the tag stuff in, and one to display the text. The type-in field is invisible but on top of display field. It should be pretty self-explanatory, but ask any questions you may have – and no, I have no quick solution for there being no cursor.

http://jsfiddle.net/qh3QP/10/