JavaScript焦点：如何关注并留在那里？

Question

我需要以下内容：

1. 用户单击复选框。
2. 焦点移到文本框。
3. 留在那里。在文本框中。

我尝试使用Javascript：

 if (rows[i].get_element().id==args.get_row().id){
     var comment = mtv.getCellByColumnUniqueName(rows[i], "Comment01").getElementsByTagName('input')[0].id;
     document.getElementById(comment).focus();
     break;
 }

它有效。焦点将转到文本框，但立即移出文本框。
但是我需要重点放在文本框中，直到用户键入任何内容。

是真的吗？

UPD：我所有的js代码都包含3个复选框和1个文本框：

function gridValuesEdits(sender, args) {
      clearCheckboxes(sender, args);
      comments(sender, args);
}

function clearCheckboxes(sender, args)
{
  switch (args.get_columnUniqueName())
  {
    case "chbx00":
      if (args.get_editorValue())
      {
        var grid = $findByControlId("Grid4"); 
        var mtv = grid.get_masterTableView();
        var rows = mtv.get_dataItems();
        var batchEditingManager = grid.get_batchEditingManager();
        for (var i=0; i<rows.length; i++)
        {
          if (rows[i].get_element().id==args.get_row().id)
          {
            batchEditingManager.changeCellValue(rows[i]._element.cells[8], false);
            batchEditingManager.changeCellValue(rows[i]._element.cells[9], false);
            batchEditingManager.endUpdate();
            break;
          }
        }
      }
      break;
    case "chbx01":
      if (args.get_editorValue())
      {
        var grid = $findByControlId("Grid4"); 
        var mtv = grid.get_masterTableView();
        var rows = mtv.get_dataItems();
        var batchEditingManager = grid.get_batchEditingManager();
        for (var i=0; i<rows.length; i++)
        {
          if (rows[i].get_element().id==args.get_row().id)
          {
            batchEditingManager.changeCellValue(rows[i]._element.cells[7], false);
            batchEditingManager.changeCellValue(rows[i]._element.cells[9], false);
            batchEditingManager.endUpdate();
            break;
          }
        }
      }
      break;
    case "chbx02":
      if (args.get_editorValue())
      {
        var grid = $findByControlId("Grid4"); 
        var mtv = grid.get_masterTableView();
        var rows = mtv.get_dataItems();
        var batchEditingManager = grid.get_batchEditingManager();
        for (var i=0; i<rows.length; i++)
        {
          if (rows[i].get_element().id==args.get_row().id)
          {
            batchEditingManager.changeCellValue(rows[i]._element.cells[7], false);
            batchEditingManager.changeCellValue(rows[i]._element.cells[8], false);
            batchEditingManager.endUpdate();
            break;
          }
        }
      }
      break;
    default:
      break;
  }
}

function comments(sender, args)
{
  switch (args.get_columnUniqueName())
  {
    case "chbx01":
      if (args.get_editorValue())
      {
        var grid = $findByControlId("Grid4"); 
        var mtv = grid.get_masterTableView();
        var rows = mtv.get_dataItems();
        var batchEditingManager = grid.get_batchEditingManager();
        for (var i=0; i<rows.length; i++)
        {
          if (rows[i].get_element().id==args.get_row().id)
          {
            vvar comment = mtv.getCellByColumnUniqueName(rows[i], "Comment01").getElementsByTagName('input')[0].id;
     document.getElementById(comment).focus();
            break;
          }
        }
      }
      break;
    case "chbx02":
      if (args.get_editorValue())
      {
        var grid = $findByControlId("Grid4"); 
        var mtv = grid.get_masterTableView();
        var rows = mtv.get_dataItems();
        var batchEditingManager = grid.get_batchEditingManager();
        for (var i=0; i<rows.length; i++)
        {
          if (rows[i].get_element().id==args.get_row().id)
          {
            var comment = mtv.getCellByColumnUniqueName(rows[i], "Comment01").getElementsByTagName('input')[0].id;
     document.getElementById(comment).focus();
            break;
          }
        }
      }
      break;
    default:
      break;
  }
}

Answer 1

设置焦点后，必须有其他东西在“窃取”焦点。正如您在下面看到的那样，将焦点设置到文本框就可以了。

// When the checkbox is clicked....
document.querySelector("[type='checkbox']").addEventListener("click", function(){
  let tb = document.querySelector("[type='text']");
  
  if(this.checked){ 
    tb.classList.remove("hidden");  // Unhide the textbox
    tb.focus();                     // Set the focus on the text box
  } else {
    tb.classList.add("hidden");     // Hide the textbox
    this.focus();                   // Put the focus on the checkbox  
  }
});

.hidden {
  display:none;
}

<label><input type="checkbox">Click to add details</label>
<input type="text" class="hidden">