提交和重置表单后如何在输入元素中设置焦点？

Question

提交表单后，我试图将焦点（）放在 nameInput 字段上，但焦点放在 priceInput 字段上，我该如何解决这个问题？

  purchaseForm.onsubmit = (evt) => {
  evt.preventDefault();
  const name = nameInput.value;
  const price = Number(priceInput.value);
  if (name !== '' && price !== '' && price > 0) {
    purchases.push({
      id: nextId++,
      name: name,
      price: price,
    });

    createElement(name);
    nameInput.focus();
    purchaseForm.reset();
  }
  if (name === '') {
    messageEl.textContent = '"Input field can't be empty"';  
    nameInput.focus();
  } else if (price === '') {   
    messageEl.textContent = '"Input field can't be empty"'; 
    priceInput.focus();
  } else if (price < 0) {  
    messageEl.textContent = ''"Input field can't be empty"';
    priceInput.focus();
  } else if ([price === '""']) {    
    messageEl.textContent = '"Input field can't be empty"';
    priceInput.focus(); 
  }
  if (price > 0) {
    messageEl.textContent = '';  
  }
};

Answer 1

感谢分享 jsbin 链接。

这是提交后的更新解决方案，现在专注于 nameInput。

https://jsbin.com/xilitewabi/2/edit?html,js,output

 else if ([price === '""']) {
    messageEl.textContent = '"Значение поля не может быть пустым"';
    nameInput.focus();
  }

问题出在您的 else if 语句中。 提交后，您专注于priceInput而不是nameInput

Answer 2

你这里肯定有问题：

messageEl.textContent = '"Input field can't be empty"';   //sets the error message if name input is string and puts focus on the name input field.
    nameInput.focus();
  } else if (price === '') {   //sets the error message if price input is empty and puts focus on the price input field.
    messageEl.textContent = '"Input field can't be empty"'; 
    priceInput.focus();

首先要注意你的 ' 和 ""。 您的错误字符串在字符串中间终止。

我已经拿走了你的代码，它实际上可以工作

purchaseForm.onsubmit = (evt) => {
  evt.preventDefault();
  const name = nameInput.value;
  const price = Number(priceInput.value);
  if (name !== '' && price !== '' && price > 0) {
    purchases.push({
      name: name,
      price: price,
    });

    nameInput.focus();
  }
}

当我提交表单时，重点是名称输入。

关于你的条件。 其中一些根本没有意义。 我已经缩小了它们的范围，它又可以工作了

purchaseForm.onsubmit = (evt) => {
  evt.preventDefault();
  const name = nameInput.value;
  const price = priceInput.value;
  if (name !== '' && price !== '' && price > 0) {
    purchases.push({
      name: name,
      price: Number(price),
    });

    nameInput.focus();
  }

  if (name === '') {
    messageEl.textContent = "Input field cannot be empty ";  
    nameInput.focus();
  } else if (price === '') {
    messageEl.textContent = "Input field cannot be empty "; 
    priceInput.focus();
  }
}