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：text插入上面的字段

<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：”和那样的帖子。如何在点击表情符号的同时保留“外星人：文本”时完全清除“说些什么......”？我们正在使用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插入如何从字段中替换“Say Something ...”，并插入：alien：success？非常感谢你们！

Answer 1

这是一个建议，代码较少。在这个建议中，我使用Mootools的OverText，而不是你的内联onfocus / onclick / onblur /值，这是行不通的。 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

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

1 个答案: