MooTools: How can I replace existing field text with text insert?

Question

I've been on this one for a while but no luck so far, however I did get emoticons fully working using code for mootools.

Basically, I have a existing field of

<input type="text" class="post_action_input" value="Say Something..." id="emoticons_insert" />

And a image underneath containing

<img onClick="javascript:$('blove2').fancyShow();" src="./images/user_status_emoticon.jpg" width="25" height="25" />

Which triggers a dropdown containing this emoticon DIV that inserts the :alien: text into the field above

<div id="blove2"><a href="javascript:;" onClick="InsertText('emoticon1','emoticons_insert'); return false;"><img src="./images/smiley/alien.png" alt="" onClick="javascript:$('blove2').fancyHide();" /></a></div>

<div id="emoticon1" style="display:none;"> :alien: </div>

And it works great. However, what is really messing up our users is that our input field contains "Say Something" that dissapeares upon click, reappears on outer click etc. When they click the emoticon, it appends and produces "Say Something...:alien:" and posts just like that. How can I completely clear "Say Something..." while preserving the :alien: text upon clicking a emoticon? We are using MooTools 1.2.

Field insert Javascript:

<script type="text/javascript">
function get(id) {
    return document.getElementById(id);
}

function contentHTML(id, m) {
    var obj = get(id),
        op = '';
    if (m) {
        op += obj.innerHTML;
    } else if (!m) {
        op += (!obj.innerText) ? obj.textContent : obj.innerText;
    }
    return (op);
}

function InsertText(input, output) {
    var text = contentHTML(input, true);
    var ele = get(output);
    ele.value += text;
}
</script>

Emoticons drop-down JavaScript:

<script type="text/javascript">
window.addEvent('domready', function() {
    Element.implement({
        fancyShow: function() {
            this.fade('in');
            this.setStyle('display', '');
        },
        fancyHide: function() {
            this.fade('out');
            this.setStyle('display', 'none');
        }
    });
    //$('element').fancyHide(); // FREEZES STATUS INPUT FIELD FOR SOME REASON
});
</script>

In other words, how can onClick insert replace "Say Something..." from the field, and insert :alien: successfully? Thank you very much guys!

Answer 1

Here is a suggestion, with less code. In this suggestion I use Mootools's OverText, instead of your inline onfocus/onclick/onblur/value which will not work. OverText comes with Mootools More and in the fiddle I used mootools 1.3.

HTML

<input type="text" class="post_action_input" title="Say something..." id="emoticons_insert" />
<img onClick="javascript:$('blove2').fancyShow();" src="/images/user_status_emoticon.jpg" width="25" height="25" />
<div id="blove2">
    <img src="/images/smiley/alien.png" data-name=":alien:" class="emoticon" alt="" />
</div>

Mootools

function InsertText(input, output) {
    var ele = document.id(output);
    ele.value += input;
    ele.fireEvent('change');
}
window.addEvent('domready', function () {
    Element.implement({
        fancyShow: function () {
            this.fade('in');
            this.setStyle('display', '');
        },
        fancyHide: function () {
            this.fade('out');
            this.setStyle('display', 'none');
        }
    });
    // Labels over the inputs.
    document.getElements('input').each(function (el) {
        new OverText(el);
    });
    document.getElements('.emoticon').addEvent('click', function () {
        var icon_name = this.get('data-name');
        InsertText(icon_name, 'emoticons_insert');
        this.getParent().fancyHide();
    });
});

Demo here