使用jQuery caret插件在IE中textarea中的插入符位置

Question

I'm using this plguin to get caret position of textarea. I have a <div> , clicking on which shows the <ul> with smilie list to put one of them into the textarea. Clicking on <div> fires the blur event on textarea. I save the caret position on blur:

oRoot.blur(function() {
    caret_pos = $(this).caret();
});

And after user click on smilie, I put it in the textarea where the caret was before it lost the focus:

oList
    .delegate('.chat-smile', 'click', function() {
        var oRoot = $(this).parent().data('oRoot');

        if (is_default_value(oRoot)) oRoot.val('');

        oRoot.val(oRoot.caret(caret_pos).caret().replace($(this).attr('smilie-code')));

        toggle_list($(this).parent());
    });

The problem is that in IE it seems that the plugin doesn't work if textarea has no focus, and in IE the blur event handler is fired after the focus is lost.

Any ideas of workaround this? I was thinking of saving the caret position on click , keyup , focus for IE..

Answer 1

I've tried the workaround I thought of befor (saving the caret position on click, keyup, focus for IE). So now function which binds events to save caret position looks like this:

function bind_save_caret_pos() {
    var event_to_bind = $.browser.msie ? 'keyup mouseup' : 'blur';

    oRoot.bind(event_to_bind, function() {
        caret_pos = $(this).caret();
    });
}

keyup deals with typing, deleting, moving around the text with arrows etc.

mouseup deals with selecting peace of text, moving cursor etc.

Answer 2

Here is another way to get the caret position in IE. You can use it , if you like.

Hope it helps.