WebFX WebBoard
Message Thread:
View All Messages
Back to WebFX
 preserving caret position i n content editable div, adam, September 3, 2003
     Re:preserving caret position i n content editable div, JT_Kiwi, September 5, 2003
         Re:preserving caret position i n content editable div, adam, September 5, 2003
             Re:preserving caret position in contentEditable div, Chris, September 5, 2003
             Re:preserving caret position in contentEditable div, Chris, September 5, 2003

Subject: Re:preserving caret position in contentEditable div From: Chris Date: September 5, 2003
Hmm.. I'm not too sure what you're asking for...

Is it that the user types in a sentence and the first time a number comes up in what they typed it is coloured red?

If so then what kiwi said would work if you caught a variable whilst doing it... for example

var foundNumber = false;

function divOnKeyDown() {
var code = event.keyCode;
// var sel = document.selection.createRange(); dont know why this is here...
var color = sel.queryCommandValue('forecolor');

if (!foundNumber) {

if(code >= 48 && code <= 57 && color != 255){
sel.pasteHTML('<font color="red">'+(code-48)+'</font>');
foundNumber = true;
return false
}

}
}

note the use of foundNumber as a global variable so that its value is kept throughout - although, if you want to use this function to apply to a lot of different conentEditable div's there are obvious limitations...

Hang on. Thinking about it, that will only work if you're number is 1 character (figure) long, wouldn't it?

So rather than checking if letters have been typed, check both... put in some code to listen for numbers being typed and set a variable to true - then listen to letters being typed and colour the first occurence of numbers being typed red then set the variable to false to indicate that letters have been typed - and since its the first occurrence only you want then only check for numbers if numbers havent being 'heard' before... you could either get the numbers that have been typed using regular expressions, or get the length of the innerText of the div before and after the numbers have been typed then create a text range which includes just that (this leads on to positioning the caret) and replace it with "<span style='color:red'>" + what the text was + "</span>"

Example:

var foundNumber = false;
var beginOfSelection, endOfSelection;

function divOnKeyDown() {
var code = event.keyCode;

var el = event.srcElement;

if (!foundNumber) {
//

if(code >= 48 && code <= 57 && color != 255){
//sel.pasteHTML('<font color="red">'+(code-48)+'</font>');
foundNumber = true;
beginOfSelection = event.srcElement.innerText.length;
return false
}

} else {

//a number has already been typed and is now finished (e.g. user type 12000000000, or some multiple digit number)

if (code >=65 && code <= 122) {
//a letter is now being typed after numbers have:

endOfSelection = el.innerText.length;

el.innerHTML = el.innerText.substring(0, beginOfSelection) + "span style='color:red'>" + el.innerText.substring(beginOfSelection, endOfSelection) + "</span>";

//now get the range and put the caret at the end - dont know if this is needed, but incase the caret needs to be put at the end, do this (ommit if unnecessary pls)

var range = el.createTextRange();
range.moveStart('character', endOfSelection); //do you need to put an moveEnd in if you just want the caret to move??
}
}
}

I think that should work, assuming that I'm interpreting the problem correctly. I should point out that I'm doing all of this from my Mac and so therefore with Mozilla without testing on IE (and with an ever decreasing knowledge of IE for windows) but I *think* this should work... If it doesnt (and someone else doesnt answer the question) I'd be happy to run up my PC and try and figure it out for you.

Not sure if it would be better to listen for onKeyUp, since everything has occured (input of text etc) by the time keyup comes along...

Now, I'm doing all this off the top of my head after a few lagers so I'd appreciate some feedback...

Chris

p.s. sorry for the hugely long post



Reply
Name: 
Email: 
Subject: 

Enter your reply to this message below. HTML tags are not supported but words that start with http://, ftp:// or mailto: are converted to links.


View All Messages
Back to WebFX