CODEWITHSUNDEEP
javascripthtmltextareaopera
MirrorMirror
MirrorMirror

Reputation: 188

tabs in textarea causes losing focus in opera

So i have made a javascript handling of the tab key in a textarea ( inserting a tab ). Which works as a charm in most cases.

problem: Opera: if the user keeps the tab key pressed ( tabs being inserted really fast ), the textarea element loses focus and the handling process doesn't work. As you can see in the example below, the focus keeps changing among the 2 buttons and the textarea.

code:

<html>
<head>
<script type="text/javascript">
function onkd(e) {
    var keyCode = 0;
    if (document.selection) {
        keyCode = e.keyCode;
    } else {
        keyCode = e.which;
    }

    if (keyCode == 9) {
        if (e.preventDefault) {
            e.preventDefault();
            e.stopPropagation();
        } else {
            e.returnValue = false;
            e.cancelBubble = true
        }

        var o = document.getElementById("texta");
        if (o.setSelectionRange) {
            var sS = o.selectionStart;
            var sE = o.selectionEnd;
            o.value = o.value.substring(0, sS) + "\t" + o.value.substr(sE);
            o.setSelectionRange(sS + 1, sS + 1);
            o.focus();
        } else if (o.createTextRange) {
            document.selection.createRange().text = "\t";
        }
    }
}

</script>
</head>
<body>
<p><button type="submit">dummy button1</button></p>
<textarea id="texta" style="width: 400px; height: 400px; overflow: hidden; white-space: pre;" onkeydown="onkd(event);">hahaha huhuhu hohoho hihihi hehehe</textarea>
<p><button type="submit">dummy button2</button></p>
</body>
</html>

updated jsfiddle: http://jsfiddle.net/JEzxx/2/

i can catch if the tab key is pressed in the onkeyup event and then in the onblur do:

onblur="if (bIsTabPressed) document.getElementById('texta').focus(); return false;"

but that doesn't solve the problem. I don't understand why the element loses focus in the first place in opera when the tab key is continually pressed.

the problem seem to exist because opera does not provide preventdefault in the keydown event... investigating for a solution...

Upvotes: 2

Views: 943

Answers (2)

MirrorMirror
MirrorMirror

Reputation: 188

Well it seems that opera is a buggy piece of software and the preventdefault works only in the keypress event. so i solved it this way:

function onkp(e) {
    if (e.keyCode == 9 && navigator.appName == "Opera") {
        e.preventDefault();
        e.stopPropagation();
    }
}

however with the sideeffect of not being able in opera to insert consecutive tabs by keeping it pressed.

Upvotes: 2

Silviu-Marian
Silviu-Marian

Reputation: 10927

  1. for Chrome: text editors compress whitespace on previous row, so use <textarea wrap="off" ...
  2. for Opera: I have no idea, but you can handle onBlur() with same keyCode and refocus the textarea.

Upvotes: 1

Related Questions