javascript - 如果单击按钮，如何强制光标进入输入字段？

Question

我想说明的，就是我想要的。当用户单击文本时，文本将转换为输入字段。但如果光标在点击时会出现，那将是最好的。怎么赚？

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' 
/> 

Answer 1

不，您不能使用 JavaScript 移动光标，但您可以使用 聚焦元素HTMLElement.focus()，因此在键盘上键入将导致在字段中输入：

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' 
/> 

Answer 2

该HTMLElement.focus()方法将焦点设置在指定元素上，如果它可以被聚焦的话。

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' 
/>