MooTools：如何用文本插入替换现有字段文本？

Question

我已经使用这个有一段时间了，但到目前为止没有运气，但是我确实使用 mootools 的代码让表情符号完全正常工作。

基本上，我有一个现有的领域

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

下面的图片包含

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

这会触发包含此表情符号 DIV 的下拉菜单，将 :alien: 文本插入到上面的字段中

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

而且效果很好。然而，真正让我们的用户感到困惑的是，我们的输入字段包含“Say Something”，在点击时消失，在外部点击时重新出现等。当他们点击表情符号时，它会附加并产生“Say Something...:alien:”和帖子就是这样。如何在单击表情符号时保留 :alien: 文本的同时完全清除“Say Something...”？我们正在使用 MooTools 1.2。

字段插入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>

表情下拉 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>

换句话说，onClick insert 如何从字段中替换“Say Something...”，并成功插入：alien：？非常感谢你们！

Answer 1

这是一个建议，代码更少。 在这个建议中，我使用 Mootools 的 OverText，而不是你的内联 onfocus/onclick/onblur/value，这将不起作用。 OverText 带有 Mootools More，在小提琴中我使用了 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();
    });
});

演示here