Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Saving/restoring caret position in a contentEditable div

    Hello everybody, this is my first post here

    Ok, this is what I'm trying to do:

    I have a contentEditable element, and am using setTimeout() to call a function which changes the innerHTML of the div. Problem is that changing innerHTML moves the caret to the end of the text.

    I need to keep the caret pos so the user can keep typing. I tried storing the caret pos with
    cursorPos=document.selection.createRange().duplicate();

    And then later restoring it with cursorPos.select() - which is IE only, but it doesn't work because the content of the div gets changed between calls, and the behavior is undefined (it basically selects everything)

    Any ideas?
    Last edited by encoded; 02-02-2005 at 06:34 PM.

  • #2
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Posting the relevant sections of code may enable other's to have a clearer picture of the problem...
    *this message will self destruct in n-seconds*

  • #3
    New Coder
    Join Date
    Feb 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    		<script>
    		var xmlhttp=false;
    			/*@cc_on @*/
    			/*@if (@_jscript_version >= 5)
    			// JScript gives us Conditional compilation, we can cope with old IE versions.
    			// and security blocked creation of the objects.
    			try {
    			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    			} catch (e) {
    			try {
    			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    			} catch (E) {
    			xmlhttp = false;
    			}
    			}
    			@end @*/
    			if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    			xmlhttp = new XMLHttpRequest();
    			}
    			
    			var cursorPos;
    			
    			var secs
    			var timerID = null
    			var timerRunning = false
    			var delay = 1000
    
    			function InitializeTimer()
    			{
    				// Set the length of the timer, in seconds
    				secs = 2
    				StopTheClock()
    				StartTheTimer()
    			}
    
    			function StopTheClock()
    			{
    				if(timerRunning)
    					clearTimeout(timerID)
    				timerRunning = false
    			}
    
    
    			function StartTheTimer()
    			{
    				if (secs==0)
    				{
    					StopTheClock()
    					xmlhttp.open("POST", "callback_asutype.aspx",true);
    					xmlhttp.onreadystatechange=function() {
    						if (xmlhttp.readyState==4) {
    							//alert(xmlhttp.responseText);
    							document.getElementById('_ctl0').innerHTML = xmlhttp.responseText;
    							
    							// THIS DOESN'T WORK RIGHT
    							cursorPos.select();
    						}
    					}
    					// THIS DOESN'T WORK RIGHT			
    					cursorPos=document.selection.createRange().duplicate();
    					
    					xmlhttp.send(document.getElementById('_ctl0').innerText);
    					
    				}
    				else
    				{
    					document.getElementById('spellTime').innerText = 'Spell checking in: ' + secs + ' seconds'
    					secs = secs - 1
    					timerRunning = true
    					timerID = self.setTimeout('StartTheTimer()', delay)
    				}
    			}
    		</script>
    This is the code.. it is used for real-time spell checking (as you type) - like in MS Word.

    '_ctl0' is the editable span.

    What callback_asutype.aspx does is parse the text and return a formatted HTML string with underlines for words, etc.
    Last edited by encoded; 02-02-2005 at 07:09 PM.

  • #4
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Would you care to break that down to an example containing relevant sections of code: just the necessary script and markup (as if you were demonstrating only the problem areas...)?
    *this message will self destruct in n-seconds*

  • #5
    New Coder
    Join Date
    Feb 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, all the magic happens in the StartTimer() function, note the // THIS DOESN'T WORK RIGHT comments

  • #6
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, I noticed, but... well, perhaps someone will be kind enough to pick it apart and construct a test from there; you never know.
    *this message will self destruct in n-seconds*

  • #7
    New Coder
    Join Date
    Feb 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's not really something that needs testing for this specific case. The problem is that there's no way of saving and restoring the current cursor position in a contenteditable element if you change its content between the calls to save and restore.

    What I'm looking for is a workaround.
    Last edited by encoded; 02-02-2005 at 08:52 PM.

  • #8
    New Coder
    Join Date
    Feb 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So you get a better idea of what I'm trying to do, here's a demo:

    http://www.softcontest.com/sharpspell/asutype.aspx

    Type something in the div, and wait for it to be spell checked. The cursor position will be moved at the end of the text, I need it to stay where it was.

  • #9
    New Coder
    Join Date
    Feb 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I managed to work around it, here's the solution if anyone's interested:

    Store the selection x, y:

    Code:
    cursorPos=document.selection.createRange().duplicate();
    clickx = cursorPos.getBoundingClientRect().left; 
    clicky = cursorPos.getBoundingClientRect().top;
    Restore the selection:

    Code:
    cursorPos = document.body.createTextRange();
    cursorPos.moveToPoint(clickx, clicky);
    cursorPos.select();
    You can see it working here:

    http://www.tachyon-labs.com/sharpspell/ (click on the "BETA! Spell as you type..." button)

    Now, I'm not sure if this works in anything other than IE right now, can anyone suggest a fix for Firefox?

  • #10
    teh Moderatorinator
    Join Date
    Sep 2004
    Location
    USA
    Posts
    2,472
    Thanks
    4
    Thanked 40 Times in 40 Posts
    [edit]My bad, I didnt click the beta spell as you type button, I clicked the other one Doesn't work in IE Or firefox for me...in IE throws and object doesn't support this property or method...line 65
    Last edited by Brandoe85; 02-03-2005 at 01:21 PM.

  • #11
    New Coder
    Join Date
    Feb 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's odd, line 65 in the document should be the xmlhttp.open() method.

    What version of IE have you got? It seems you don't have the XMLHttp component. I tested on some other computers and it did work...

  • #12
    teh Moderatorinator
    Join Date
    Sep 2004
    Location
    USA
    Posts
    2,472
    Thanks
    4
    Thanked 40 Times in 40 Posts
    Ah, that might be it, i'm using IE6

  • #13
    New Coder
    Join Date
    Feb 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, you should have it... it's not a custom component, it should be there on your system.... very odd


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •