setting loses caret position on
element on pressing TAB key

Question

I have pre with contentEditable="true" on my webpage and I am trying to make it append "\t" when I press <TAB>. I found some other plugins for that but they were working only on <textarea>.

So, the problem is that when I append text to the <pre> through jQuery, it loses the caret position. I was sure it was losing focus but it's not. So $("pre").focus(), will do nothing.

I tried to blur it first but this is not practical cause the caret will return on different position depending on the browser. some help please... :P,

My code is here: http://jsfiddle.net/parisk/kPRpj/

There is certainly something strange happing there, however I would suggest avoiding doing this in the first place. Not only does your code currently only append the tab, even if the cursor is not at the end of the text, but more importantly it breaks accessibly for users who don't (or cant't) use a mouse. — RoToRa, Feb 23 '11 at 12:38
I should use it because all this is about a source code editor :P. — Paris, Feb 23 '11 at 13:26
Is there a compelling reason you're not simply using a `textarea`? Sounds to me pretty much like a `pre` with `contentEditable` set to true... — Jordan Reiter, Mar 01 '11 at 22:11
Hey, why don't you just read through the code on the jsfiddle.net site? They use editable elements and seem to support the tab key. — Jordan Reiter, Mar 01 '11 at 22:33
No it's not the same. The way to find the caret position/selection in a pre tag (editable or not it is the same) and a textarea is dramatically different — Paris, Mar 07 '11 at 09:37

score 2 · Answer 1 · answered Jul 11 '11 at 22:16

2

Try using document.execCommand instead. Here’s a demo. In short:

$("pre").keydown(function(e){
    if (e.keyCode==9) {
        e.preventDefault();
        document.execCommand('InsertHTML', false, '\t');
    }
});

answered Jul 11 '11 at 22:16

s4y

50,525
12
70
98

James Khoury · Answer 2 · 2011-04-14T06:19:23.553

firstly Try

$("pre").keydown(function(e){
    if (e.keyCode==9) {
        e.preventDefault();
        $("pre").append("\t");   
    }
});

for inserting a tab. it will insert a tab after your cursor

then in chrome

var myselection = document.getSelection();
myselection.extend(jQuery("pre")[0].lastChild, jQuery("pre")[0].lastChild.length)
myselection.collapseToEnd();

in IE8

var myselection = document.selection;
myselection.extend(jQuery("pre")[0].lastChild, jQuery("pre")[0].lastChild.length)
myselection.collapseToEnd();

should get you caret at the end.

(all together)

$("pre").keydown(function(e){
    if (e.keyCode==9) {
        e.preventDefault();
        $("pre").append("\t"); 

        var myselection = null;
        if(document.getSelection)
        {
            myselection = document.getSelection();
        }
        else if (document.selection)
        {
            myselection = document.selection;
        }

        if(myselection != null)
        {
            myselection.extend(jQuery("pre")[0].lastChild, jQuery("pre")[0].lastChild.length)
            myselection.collapseToEnd();
         }
    }
});

EDIT it would also be safer to add in a test to see if the lastChild is null and other such. Also in the keydown function jQuery("pre") would be better to be jQuery(this) and put into a variable if you are using more than once. (which the example is but I'm too lazy)

Sorry man I changed my whole code due to this problem, so now this issue does not exist :-/ — Paris, Jul 15 '11 at 17:50

score 0 · Answer 3 · answered May 05 '11 at 19:35

To only your question, the jquery caret libraries are pretty good at encapsulating the quirks around the different browsers (namely IE): http://plugins.jquery.com/plugin-tags/caret

You could always just use this to get an index of all the tab positions and then clean them later...

score 0 · Answer 4 · answered May 09 '11 at 14:57

James Khoury's answer always puts the caret at the end of the <pre>, which is not desirable when the user hits tab in the middle of the text.

Here is a modified version tha fixes this issue : http://jsfiddle.net/kPRpj/12/. It should be fairly trivial to make tab indent the line instead of adding a tab character at the caret position. To do that, you would replace

container.textContent = text.substring(0,start)+'\t'+text.substring(end);

with

var left = text.substring(0,start);
var lastLine = left.lastIndexOf("\n");
if (lastLine == -1) lastLine = 0;
container.textContent = left.substring(0,lastLine)+'\t'+text.substring(lastLine);

I've put a version that behaves this way on jsfiddle. However you might need to work around some inconsistencies in their management of '\n\r'. For example, I see that chromium sees each line as a separate text node, which is rather unexpected. I haven't tested it in other browsers.

setting loses caret position on element on pressing TAB key

4 Answers4

setting loses caret position on
element on pressing TAB key