Question: What i want to illustrate, is what i want. The text transforms into an input field when the user clicks on it. But it will be the best if the cursor will be there on click. How to earn it?

```js
const input = () => {
  const field = document.querySelector('input');
  document.querySelector('p').style.display = 'none';
  field.style.display = 'block'
}
```

```css
input{
  display: none
}
```

```html
<p id='target' onClick='input()'>Click</p>
<input
  type='text' 
  value='type'
  name='name' 
/> 
```

Answer: 
No, [you can't move the cursor using JavaScript](https://stackoverflow.com/questions/2322603/move-mouse-pointer-in-javascript) but what you can do is focus the element using [`HTMLElement.focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus), so typing on the keyboard will result in input in the field:

```js
const input = () => {
  const field = document.querySelector('input');
  document.querySelector('p').style.display = 'none';
  field.style.display = 'block'
  field.focus() // focus the element
}
```

```css
input{
  display: none
}
```

```html
<p id='target' onClick='input()'>Click</p>
<input
  type='text' 
  value='type'
  name='name' 
/> 
```
> 
> The [`HTMLElement.focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) method sets focus on the specified element, if it can be focused.
> 
> 
> 

```js
const input = () => {
  const field = document.querySelector('input');
  document.querySelector('p').style.display = 'none';
  field.style.display = 'block';
  field.focus();
}
```

```css
input{
  display: none
}
```

```html
<p id='target' onClick='input()'>Click</p>
<input
  type='text' 
  value='type'
  name='name' 
/> 
```