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

我在这方面已经有一段时间了，但到目前为止运气不好，不过我确实使用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>

：外国人：

而且效果很好。然而，真正让我们的用户感到困惑的是，我们的输入字段中包含的“说点什么”在单击时消失，在外部单击时重新出现，等等。当他们单击表情符号时，它会附加并生成“说点什么…”：外星人：“和类似的帖子。如何在单击表情符号时保留：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>

函数get（id）{
返回文档.getElementById（id）；
}
函数contentHTML（id，m）{
var obj=get（id），
op=''；
如果（m）{
op+=obj.innerHTML；
}如果（！m）{
op+=（！obj.innerText）？obj.text内容：obj.innerText；
}
返回（op）；
}
函数InsertText（输入、输出）{
var text=contentHTML（输入，true）；
var ele=get（输出）；
元素值+=文本；
}

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

addEvent（'domready'，function（）{
元素。工具({
fancyShow:function（）{
这个。淡入（'in'）；
此.setStyle（'display'，''）；
},
fancyHide:function（）{
这个。淡出（“淡出”）；
this.setStyle（'display'，'none'）；
}
});
//$（'element'）.fancyHide（）；//由于某种原因冻结状态输入字段
});

---

换句话说，onClick insert如何替换字段中的“Say Something…”并插入：alien:successfully？非常感谢大家

这里有一个建议，代码更少。 在这个建议中，我使用Mootools，而不是内联的onfocus/onclick/onblur/value，这将不起作用。超文本更多地与Mootools一起出现，在小提琴中我使用了Mootools 1.3

HTML

---

演示

这里是一个建议，代码更少。 在这个建议中，我使用Mootools，而不是内联的onfocus/onclick/onblur/value，这将不起作用。超文本更多地与Mootools一起出现，在小提琴中我使用了Mootools 1.3

HTML

---

Demo

您是否尝试删除

ele.value+=text中的
+
？这就清除了“说点什么”。顺便说一句，完成这把小提琴，让它更清楚你有什么好的，没有
+
？，它是否能像你想的那样工作，就像我更新了小提琴一样。您的建议有效，但我如何保留他们键入的文本，并将表情符号与输入文本一起插入，但仍替换为“说点什么…”？您是否尝试删除
ele.value+=text中的
++
？这就清除了“说点什么”。顺便说一句，完成这把小提琴，让它更清楚你有什么好的，没有
+
？，它是否能像你想的那样工作，就像我更新了小提琴一样。您的建议有效，但我如何保留他们键入的文本，并将表情符号与其输入文本一起插入，但仍然替换“说点什么…”？重叠文本“说点什么…”仍然不是，而不是替换为表情符号值。这就是问题所在。@CodyTapping，用
ele.firevent（'change'）更新了演示以防您先按表情符号。第一次打字已经在努力隐藏“说点什么…”嗨。对不起，迟了答复。是的，我已经成功地测试过了。有一些问题，但它是伟大的代码，并增加了我们不断的MooTools支持，我感谢它@CodyTapping，如果需要更多帮助，请告诉我。否则请点击接受此答案。很高兴我能帮忙！我没有15个名声，但就我个人而言，这是一个公认的答案。谢谢。重叠文本“说点什么…”仍然没有，没有被表情符号值取代。这就是问题所在。@CodyTapping，用
ele.firevent（'change'）更新了演示以防您先按表情符号。第一次打字已经在努力隐藏“说点什么…”嗨。对不起，迟了答复。是的，我已经成功地测试过了。有一些问题，但它是伟大的代码，并增加了我们不断的MooTools支持，我感谢它@CodyTapping，如果需要更多帮助，请告诉我。否则请点击接受此答案。很高兴我能帮忙！我没有15个名声，但就我个人而言，这是一个公认的答案。非常感谢。
<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>

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();
    });
});