我已经使用这个有一段时间了,但到目前为止还没有运气,但是我确实使用 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 的下拉菜单,该 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: 文本的同时完全清除“说点什么...”?我们正在使用 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:?非常感谢你们!