How to force the cursor into the input field if a button clicked?

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?

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

input{
  display: none
}

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

You can't move the user cursor. For your case I recommand to give the focus on your input. Add this to your function document.getElementById("yourinputID").focus(); — executable, May 31 '18 at 15:08

score 4 · Accepted Answer · answered May 31 '18 at 15:11

4

No, you can't move the cursor using JavaScript but what you can do is focus the element using HTMLElement.focus(), so typing on the keyboard will result in input in the field:

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

input{
  display: none
}

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

answered May 31 '18 at 15:11

Luca Kiebel

9,790
7
29
44

1

Be aware of browser support https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/focus – executable May 31 '18 at 15:13
@executable Yes, it's not very well supported, but it's better than nothing – Luca Kiebel May 31 '18 at 15:16

Mamun · Answer 2 · 2018-05-31T15:21:23.147

3

The HTMLElement.focus() method sets focus on the specified element, if it can be focused.

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

input{
  display: none
}

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

edited May 31 '18 at 15:21

answered May 31 '18 at 15:10

Mamun

66,969
9
47
59

How to force the cursor into the input field if a button clicked?

2 Answers2