jQuery编写表情输入插件的问题


<head>
<script type="text/javascript">
        (function ($) {
            $.fn.extend({
                insertAtCaret: function (myValue) {
                        this.focus();
                        sel = document.selection.createRange().text+=myValue;
                        this.focus();
                })
            })(jQuery);
        //jQuery扩展方法：向指定文本框插入字符，光标处插入
        //$("#to_email").insertAtCaret(";");        var InsertPress = function(){};            InsertPress.Prototype={
//初始化，绑定事件
Initialize:function (inputButton,tarTextBox, imgContainer,) {
$(imgContainer+" img").each(function(){
$(this).click(function(){
$(tarTextBox).insertAtCart($(this).attr("alt"));
});
});
$(inputButton).click(function(){
$(imgContainer).show();
});
},
//将文本替换回图片
ConvertBack:function(outputDiv){
$(outputDiv).replace(/Rex.../,"...");
}
}
    </script>
    <script type="text/javascript">
        $(document).ready(
            function () {
                var press=new InsertPress();
InsertPress.Initialize("#inputButton","#TargetTxt","#imgContainer");
InsertPress.ConvertBack("#OutputDiv");
            });
    </script>
</head><body>
    <div id="OutputDiv">
        <p>
            [表[表情5][表情7][表情
        </p>
    </div>
    <div id="InputDiv">
        <textarea id="TargetTxt" rows="5" cols="5"></textarea>
        <div id="inputButton"></div>
<div id="imgContainer">
<img alt="ABC" src="../imgFolder/ABC.gif"/>
<img alt="ABC" src="../imgFolder/ABC.gif"/>
<img alt="ABC" src="../imgFolder/ABC.gif"/>
<img alt="ABC" src="../imgFolder/ABC.gif"/>
<img alt="ABC" src="../imgFolder/ABC.gif"/>
<img alt="ABC" src="../imgFolder/ABC.gif"/>
</div>
<input type="button" id="TargetBtn" value="提交" />
    </div>
</body>
因为我在公司，所以真实源码手上没有，只是随手在notepad里写了一个，可能run不了。（只考虑IE浏览器的效果，FF上已经没问题了）
现在问题就在于：
我怎么才能点击一个img之后，自动关闭这个imgContainer？（不仅如此，点击页面任何区域，这个imgContainer也需要关闭）
我试过两种方法：
1.inputButton添加blur事件，但是这样会造成img的click事件还未触发就先触发了inputButton的blur事件。
2.$(document)添加click事件，但这会造成一个莫名其妙的问题，插入到文本框中的字符始终都插入到开始的地方，并不是在光标处插入。(只有IE浏览器会出现这个问题。另外据我观察，产生这个问题时，文本框中的光标始终闪动很快，是否是这里出问题了？)

解决方案 »

  1.   

    我怎么才能点击一个img之后，自动关闭这个imgContainer？凡是图片，都是表情图片，所以取所有img标签的对象，添加点击事件，这个很简单，应该没问题。
    不仅如此，点击页面任何区域，这个imgContainer也需要关闭。既然有你说的那个灵异效果，就不用那个方法。换个思路，给imgContainer加上onmouseout事件，鼠标移出就关闭，比没事硬去点击其它地方还省事。
      

  2.   

    小弟是个初级的业余前端，你这样说我受之不起啊...你说的onmouseout倒是很好哦，但我看到很多网站的都是移除不关闭，点击页面其他地方才关闭的。我就不知道其他网站怎么做的，哪位前辈有demo可以借鉴一下？
    另外，对于我的问题2，错误可能并不在InsertPress函数里，那个光标处插入的jQuery扩展方法也许有bug。
    其实我是帮同学做的一个asp.net UserControl，还有很多东西没有完善，等做到拿出来不丢人了，一定分享。
      

  3.   


    最终我还是使用了JQ的hover方法来实现的，谢谢了~