The position of cursor

I have a page at http://form.kr/test01/textarea/cursorAutofocus.php
When it is loading, the cursor is in front of “1”.

I like to make the cursor is in front of “12” when it is loading.
After I read the page at https://stackoverflow.com/questions/1552567/specifying-where-to-focus-within-textarea I made a page at http://form.kr/test01/textarea/cursorLine.php

I am disappointed because the cursor is not located in front of “12”.
Can I make the cursor to locate in front of “12” with your help?

Hi @joon1, if you open the console of your browser dev tools you’ll see an

… because you’re trying to use a number as parameter name, which should probably be passed as an argument instead; furthermore, you’re not actually calling FocusMe() at any point. And if you were, you’d get a type error because you misspelled getElemenById() in line 34, and then a reference error because you forgot to copy / paste the setSelRange() function from that SO thread. After fixing those issues it should work as expected.

1 Like

I fixed it at http://form.kr/test01/textarea/cursorAnotherName.php

Do you mean I should use a text as parameterName like the code below?

<script>
function FocusMe(anotherName){ 
 var cFocus = document.getElementById("myarea").innerHTML;
 var pos = cFocus.indexOf(anotherName);
 setSelRange(document.getElementById('myarea'), pos, pos); 
}
</script>

I have a page with the code above at http://form.kr/test01/textarea/cursorAnotherName.php
But it seems not to focus on the line “anotherName”.

What error messages are you getting in the console?

No error messages I am getting in the console of http://form.kr/test01/textarea/cursorAnotherName.php at the moment

Hi there joon1,

does this help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

</head>
<body>

<textarea id="myarea" rows="30">
1
2 
3 
4 
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30</textarea>

<script>
(function( d ) {
   'use strict';
   var cFocus, pos, tarea = d.getElementById( 'myarea' );
       tarea.focus();
       cFocus = tarea.textContent;
       pos = cFocus.indexOf( 12 );
       tarea.setSelectionRange( tarea, pos, pos );
}( document ));
</script>

</body>
</html>

coothead

That would be syntactically correct, but you’re still confusing the function parameter (in this case, a variable with the name anotherName) with the arguments you want to pass to the function (such as the string "anotherName" or the number 12); also you’re still not calling the function. Consider:

function foo (bar) {
  console.log('You passed the value', bar)
}

foo('someText') // -> You passed the value someText
foo(12)         // -> You passed the value 12

So your function call would have to be focusMe('anotherName')… see here for a general introduction to functions in JS:

(BTW function names should start lower cased if they are not a constructor functions).

I made http://form.kr/test01/textarea/cursorBlock.php with your code.
It works for designating which is ready to cut or copy.

I don’t want to designate for ready to cut or copy.

I want to locate my cursor on the line 12 instead on the line 1 at http://form.kr/test01/textarea/cursorAutofocus.php

Then why were you using that script? :rolleyes:

What you need to search for is…

JavaScript set caret position in textarea :biggrin:

coothead

1 Like

I am sorry it is a good code for my purpose because my cursor can be easily located at line 12 of http://form.kr/test01/textarea/cursorBlock.php as I move the cursor slightly toward right with right arrow. key.
Thank you for the code.

Here, I meet another problem.
Please look the page at http://form.kr/test01/textarea/cursorBlock2.php.
The page cursorBlock2 is still good.
But at http://form.kr/test01/textarea/cursorBlock3.php, the cursor block is ended on the line 7 because there is a text “12” after the text “gggg” instead of the line number “『12』”.

“12” on the line number 7 is not a line number but a text.

I like to make it locate on the line number 12 only.
Can I make it with your help?

I think you got something mixed up here; setSelectionRange() takes the start and end position as the first and second argument, respectively – not the textarea on which you’re already calling the method.

If you want to place the caret at line number 12, I wouldn’t search for the string "12" at all; instead, you might split() the text by line feeds, and get the length of the string from join()ing the first n substrings:

var textarea = document.getElementById('myarea')

var linePosition = textarea.value
  .split('\n')
  .slice(0, 11)
  .join('\n')
  .length + 1

textarea.selectionStart = linePosition

// Or, parameterized:
function getLinePosition (element, line) {
  return element.value
    .split('\n')
    .slice(0, line)
    .join('\n')
    .length + 1
}

textarea.selectionStart = getLinePosition(textarea, 11)

(Note that in most programming languages you start counting with zero, so you’re actually looking for line number 11.)

Hi there joon1,

you can see a caret positioning example here…

https://codepen.io/coothead/full/yLyPdjK

All the files used may be found in the attachment…

joon1.zip (2.1 KB)

coothead