Place cursor at end of line in editable div

[The Little Guy]

So, I am using this on a keypress event, the problem I am having is with range.setStart

 

What I am trying to do is place the cursor at the end of the line when the user presses a key.

 

$(document).ready(function(){
    $("#q").keypress(function(e){
        var txt = $(this).text();
        var key = String.fromCharCode(e.keyCode);
        txt = txt + key;
        var last = txt.lastIndexOf("in ");
        if(last == -1){
            last = txt.length + 1;
        }
        var str = txt.substr(0, last);
        $(this).html("<b>"+str+"</b>"+txt.substr(last));

        var el = document.getElementById("q");
        var range = document.createRange();
        var sel = window.getSelection();
        var length = $(this).text().length;
        range.setStart(el, length);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
        el.focus();

        return false;
    });
});

 

In chrome I am getting this error

Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1

 

The code works on the very first key press, so if i type "h" the cursor gets placed after the "h" but on the second key press I get the above error in chrome.

 

Any suggestions?

[Jessica]

Can you explain what you're trying to do in more detail? It sounds like if the user is trying to type in the textarea, you're going to constantly move the cursor to the end, and that would be kind of annoying...

[The Little Guy]

What I am trying to do, is format text in a div while a user types. Anything before the word "in" will be bold; "in" and anything after will be a normal font.

 

 

Example:

---

Hunger Games in books

---

[Jessica]

What does that have to do with moving the cursor?

[The Little Guy]

because I build the string as the user types, and every time a key is pressed I re-write what is in the editable div which then places the cursor at the beginning of the line. I need to move the cursor to some point in the text

[Jessica]

So my point is what happens when the users spots a typo, moves the cursor back, hits backspace to fix their typo and type a new letter, and you move the cursor to the end of the line?

[The Little Guy]

good point, I think I have that covered now. But how do I fix the error?

 

var caretPos = 0;
$(document).ready(function(){
    $("#q").keypress(function(e){
        var txt = $(this).text();
        var key = String.fromCharCode(e.keyCode);
        txt = (txt + key).toString();
        var last = txt.lastIndexOf(" in ");
        if(last == -1){
            last = txt.length + 1;
        }
        var str = txt.substr(0, last);
        $(this).html("<b>"+str+"</b>"+txt.substr(last));

        console.log(caretPos)

        var el = document.getElementById("q");
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStart(el, caretPos);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
        el.focus();

        return false;
    }).keyup(function(){
        var sel = window.getSelection();
        range = sel.getRangeAt(0);
        caretPos = range.endOffset;
    });
});

[Jessica]

Can you post the HTML part too? I want to try it on my localhost to debug.

[The Little Guy]

<style>
#q{
    font-size: 17px;
    color: #555555;
    border: 0;
    border-radius: 5px;
    box-shadow: inset 1px 1px 5px rgba(0,0,0,.7);
    padding: 8px;
    padding-right: 20px;
    width: 400px;
    height: 40px;
    background-color: #ffffff;
    overflow: hidden;
    white-space: nowrap;
}
</style>
<div name="q" id="q" contenteditable="true"></div>

 

if you remove:

 

var el = document.getElementById("q");
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStart(el, caretPos);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
        el.focus();

 

you can see how it is supposed to work, only the cursor stays at the beginning of the line

[Jessica]

I'm not getting any errors, but I also can't type anything in the box. Firebug shows no errors. Weird....

[The Little Guy]

I can type in the box with chrome.

[Mahngiel]

If you're always going to add "in books" or whatever, why not just use

.text( $(this) + 'in books' ) ?

 

I sorta skimmed the posts, sorry if i missed an important detail why you couldn't do that.

[The Little Guy]

because you can do "in moves", "in games", "in videos" etc

[Zane]

Just a suggestion, but would it not be easier to make this changes on blur rather than while the user types.  If you insist on doing it as the user types, you should have this text mirrored in another div so people can fix their typos and such as jesi mentioned.

[The Little Guy]

I got it!

 

I used this library:

http://code.google.com/p/rangy/

 

and this code:

 

function format_type(){
   // Save the selection
   var savedSel = rangy.saveSelection();

   // Do your formatting here
   format();

   // Restore the original selection
   rangy.restoreSelection(savedSel);
}
function format(){
   var el = document.getElementById('q');
   var text = el.innerHTML.replace(/<b>|<\/b>/gm, "");
   text = text.replace(/^(.+)( in.+)$/igm, "<b>$1</b>$2");
   if(!text.match(/ in /i)){
       text = text.replace(/(.+)/, "<b>$1</b>");
   }
   el.innerHTML = text;
}
$(document).ready(function(){
   format();
   $("#q").keypress(function(e){
       if(e.keyCode == 13){
           return false;
       }
   }).keyup(function(e){
       if(e.keyCode == 13){
           window.location = "/search.php?q="+escape($(this).text())+"&ac=search";
       }
       format_type();
   });
});