The position of cursor

JavaScript
1

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?

2

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
4

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”.

5

What error messages are you getting in the console?

6

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

8

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

9

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).

10

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

11

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
12

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?

13

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.)

14

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

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.