时间戳

首页 > 解决方案 > JavaScript 焦点：如何专注并留在那里？

javascript - JavaScript 焦点：如何专注并留在那里？

问题描述

我需要以下内容：

  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：我所有 3 个复选框和一个文本框的 js 代码：

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;
  }
}

标签： javascript

解决方案

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

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

推荐阅读