www.webdeveloper.com
Results 1 to 6 of 6

Thread: How to get current row and col of the caret position in text area using javascript.

  1. #1
    Join Date
    Mar 2011
    Posts
    37

    How to get current row and col of the caret position in text area using javascript.

    Hi,

    I am developing a page that works like a text editor.

    In that page, I am trying to show the user on which row and column he is in.

    Below is the code, I have prepared for this task,

    Code:
    <html>
    	<head>
    <title>Get/Set Caret in Textarea Example</title>
    		<script>
    
    function doGetCaretPosition (ctrl) {
    
    	var CaretPos = 0;
    
    	if (document.selection) {
    
    		ctrl.focus ();
    		var Sel = document.selection.createRange ();
    		Sel.moveStart ('character', -ctrl.value.length);
    		CaretPos = Sel.text.length;
    
    	}
    	return (CaretPos);
    
    }
    
    function updateCaretPos(ctrl)
    {
    	cartp = doGetCaretPosition(ctrl);
    	currentL = ctrl.value;
    	if(ctrl.value.substring(0,cartp).indexOf("\n")!=-1){	
    		row = ctrl.value.substring(0,cartp).match(/\n/g).length+1;
    		currentL = currentL.substring(currentL.substring(0,cartp).lastIndexOf("\n")+1,cartp);
    	}
    	else{
    		currentL = currentL.substring(0,cartp);
    		row = 1;
    	}
    	char = currentL.length+1;
    	document.getElementById("caretPos").innerHTML = "Line:"+row+" "+"char:"+char
    }
    		</script>
    	</head>
    	<body>
    		<textarea id="get" name="get" rows="20" cols="80" wrap="off" onclick="updateCaretPos(this)" onkeyup="updateCaretPos(this)"></textarea>
    		<p id="caretPos"></p>
    	</body>
    </html>

    However I am not sure where I have did the wrong...... on each row and first column, value is not getting updated properly.

    Please fix this code.

    Thanks!

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    i think IE has "\r\n" linebreaks, though i'm not sure if those are counted as 2 by the range interface. so, you might be off by 1 (or the # of lines) on the two different measurements...

  3. #3
    Join Date
    Mar 2011
    Posts
    37
    I found the problem,

    If the last character of the selection is newline character("\n") then it is getting ignored.

    How to resolve this?

    If there is any other approach to get the caret position in text field in row/col format, please share.

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    ctrl.value.substring(0,cartp +1) ?

    (just a guess, i don't use IE much...)

  5. #5
    Join Date
    Mar 2011
    Posts
    37
    if we add 1 to the caret postition then it is getting added to all the places and going wrong.

    Any one else have any other approach for this problem?

    Thanks!!

  6. #6
    Join Date
    Mar 2011
    Posts
    37
    I am still having this issue....

    When ever a selection ends with "\n" character.... it is getting trimmed and not showing in the selected text.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles