[JS] Smiley insert @ caret position zonder focus?

[Tanuki]

Wij gebruiken momenteel de volgende code om smilies toe te voegen in een textarea op de caret position (waar de cursor staat dus) of ter vervanging van de tekst die op dat moment is geselecteerd.

Om dat te kunnen doen moeten we eerst een focus doen (voor IE) om vervolgens te kijken naar de tekst e.d.

Het probleem is alleen dat door die focus de pagina naar beneden springt. Ik kan alleen niks anders bedenken wat toestaat zonder een focus toch in die textarea dingen te doen.
Weet iemand of het mogelijk is om zonder een focus toch informatie over de tekst in de textarea op te slaan?

Hieronder de code, mocht iemand er iets aan hebben?

JavaScript:

function storeCursor()
{
    this.cursorPos = document.selection.createRange().duplicate();
}
function initSmilies(target)
{
    target = $(target);
    if (target)
    {
        target.focus();
        if (target.createTextRange)
        {
            target.onkeyup = storeCursor;
            target.onclick = storeCursor;
            target.onselect = storeCursor;
            target.onselect();
        }
    }
}
function smiley(text, target)
{
    text = ' ' + text + ' ';
    target = $(target);
    
    if (target)
    {
        if (target.cursorPos)
        {
            var cursorPos = target.cursorPos;
            cursorPos.text = text;
        }
        else if (target.selectionStart != undefined)
        {
            // remember scrollposition
            var scrollTop = target.scrollTop;

            var sStart = target.selectionStart;
            var sEnd = target.selectionEnd;
            target.value = target.value.substr(0, sStart) + text + target.value.substr(sEnd);
            var nStart = sStart == sEnd ? sStart + text.length : sStart;
            var nEnd = sStart + text.length;
            target.setSelectionRange(nStart, nEnd);

            // reset scrollposition
            target.scrollTop = scrollTop;
        }
        else
        {
            target.value += text;
        }

        target.focus();
        if (target.cursorPos) target.onselect();
    }
}

[Patriot]

Ik weet niet of het mogelijk is, maar wellicht kun je in de onblur van het tekstveld een functie plaatsen die de positie van de caret aanpast? Op het moment dat je dan een smiley in wilt voegen kun je vervolgens gewoon de inhoud van het tekstveld wijzigen.

De vraag is echter of de focus al is verloren als onblur aan word geroepen, als dat het geval is maakt het natuurlijk niets uit.

[Creepy]

Hmm.. javascript, dat hoort in Webdesign, Markup & Clientside Scripting
Move Programming -> Webdesign, Markup & Clientside Scripting

[Tanuki]

Bedankt voor de replies tot zover!

Ik ga eens kijken, want wat Patriot zegt is natuurlijk 100% waar: Die code hoeft pas uitgevoerd te worden als iemand op een smiley gaat klikken.

En als je dan op een smiley klikt, ben je ook al in dat deel van de pagina, dus merk je de verspringing niet, lijkt mij.

Daar ga ik eens even naar kijken. Ik laat het weten.

edit:
Oeps...

Ik zou nog iets laten weten. Het werkt perfect hoor. Ik stel voor dat jullie dit ook hier op GoT doen:

JavaScript:

function storeCursor()
{
    this.cursorPos = document.selection.createRange().duplicate();
}
function initSmilies(target)
{
    target = $(target);
    if (target)
    {
        target.focus();
        if (target.createTextRange)
        {
            target.onkeyup = storeCursor;
            target.onclick = storeCursor;
            target.onselect = storeCursor;
            target.onselect();
        }
    }
}

var aTargetsInitialized = {};
function smiley(text, target)
{
    target = $(target);
    
    if (target)
    {
        if (!aTargetsInitialized[target])
        {
            initSmilies(target);
            aTargetsInitialized[target] = true;
        }
        text = ' ' + text + ' ';
        
        if (target.cursorPos)
        {
            var cursorPos = target.cursorPos;
            cursorPos.text = text;
        }
        else if (target.selectionStart != undefined)
        {
            // remember scrollposition
            var scrollTop = target.scrollTop;

            var sStart = target.selectionStart;
            var sEnd = target.selectionEnd;
            target.value = target.value.substr(0, sStart) + text + target.value.substr(sEnd);
            var nStart = sStart == sEnd ? sStart + text.length : sStart;
            var nEnd = sStart + text.length;
            target.setSelectionRange(nStart, nEnd);

            // reset scrollposition
            target.scrollTop = scrollTop;
        }
        else
        {
            target.value += text;
        }

        target.focus();
        if (target.cursorPos) target.onselect();
    }
}

[ Voor 71% gewijzigd door Tanuki op 30-05-2008 19:44 ]