Question

此Meteor客户端代码尝试清除所有locals和textarea元素，因为它将焦点移动到页面上的第一个元素。
如果页面上没有“textarea”，有时它无法工作。知道怎么解决吗？

input

$('textarea, input').val('');
$('textarea, input').first().focus();

Answer 1

清除<form>和重置<form>之间存在差异。在演示中，C表和D表明了这种差异。我认为涉及.focus()的问题的后半部分很容易，但它实际上有一个意想不到的要求。我们希望focus on needs to have tabindex属性指定的元素。

详情在演示

中发表

演示

input {
  font: inherit;
  width: 12ch;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title></title>
  <style></style>
</head>

<body>
  <header> </header>
  <section>
    <form id='formA'>
      <label>Form A</label>
      <textarea>Form control field values that are written 
    within the source HTML are default values</textarea>
      <input value='Default'>
      <input value=''>
      <input value='Default'>
      <textarea>Default</textarea>
      <p>With textareas...</p>
    </form>
    <hr>
    <form id='formB'>
      <label>Form B</label>
      <input value='Default'>
      <input value='Default'>
      <input value=''>
      <p>...without textareas</p>
    </form>
    <hr>
    <form id='formC'>
      <label>Form C</label>
      <input value=''>
      <input value='Default'>
      <input value='Default'>
      <ol>
        <li>Type anything in the first input of Form C</li>
        <li>Purpose: Determine what clearing a form does.</li>
        <li>Results: All fields are emptied (cleared)</li>
      </ol>
    </form>
    <hr>
    <form id='formD'>
      <label>Form D</label>
      <input value=''>
      <input value='Default'>
      <input value='Default'>
      <ol>
        <li>Type anything in the first input of Form D</li>
        <li>Purpose: Determine what reseting a form does.</li>
        <li>Results: The text typed in the first input is cleared, but the remaining inputs with default values remain.</li>
      </ol>
    </form>
    <hr>
    <hr>
    <fieldset id='btnGrp'>
      <input type='button' value='CLEAR A' data-id='1'>
      <input type='button' value='CLEAR B' data-id='2'>
      <input type='button' value='CLEAR C' data-id='3'>
      <input type='button' value='RESET D' data-id='4'>
    </fieldset>
  </section>
  <footer>&nbsp;</footer>
  <script>
    function clearFields(x) {

      /* Use HTMLFormControlsCollection to gather all forms
	|| and their form controls (<input>, <textarea>, etc.)
	|| Array.from() is then used to make the HFCC into a
	|| real array.
  || An integer is passed to determine which <form> 
	|| will be processed by it's index.
	*/
      const F = Array.from(document.forms[x].elements);

      /* Run each FC (Form Control) through a loop
      || that calls an anonymous function...
      */
      F.forEach(function(field, index) {

        // Clear FC value
        field.value = '';

        // If this is the first FC in the array...
        if (index === 0) {

          /* SET TABINDEX TO A VALUE OF -1 OR MORE 
          || Without tabindex, the FC cannot gain focus
          || programmatically.
          */
          field.setAttribute('tabindex', '0');

          // Focus on said FC
          field.focus();
        }
      });
    }

    // Register the click event on fieldset#btnGrp...
    document.getElementById('btnGrp').addEventListener('click', function(e) {

      // Reference the clicked id
      var tgt = e.target;

      // Get the data-id of the button that was clicked (e.target)
      var ID = Number(e.target.getAttribute('data-id'));

      // if clicked button (e.target) is the forth one...
      if (ID === 4) {

        /* Using HFCC to reference button and call the reset()
        || method on the fourth <form> 
        || Form C and D demonstrates the difference between
        || clear and reset
        */
        document.forms[3].reset();
        tgt.setAttribute('tabindex', '0')
        tgt.focus();
      } else {
        clearFields(ID - 1);
      }
    });
  </script>
</body>

</html>

Answer 2

您可以使用此行重置所有表单字段

document.getElementById("myForm").reset();

然后只需按原样聚焦第一个元素

Answer 3

将id分配给您的表单，例如<form id="myForm">

$("#myForm")[0].reset();

这将重置整个表单，无论它包含什么。

清除所有输入文本元素并将焦点移至第一个

3 个答案:

演示