Question

我可能误解了.focus（）的目的。

当我将表插入内容可编辑元素时，我想将焦点设置为表的第一个单元格。通过焦点我的意思是光标将在第一个单元格中，用户可以直接在单元格中键入而不选择它。

然而，我似乎无法做到这一点。

此外，当我单击桌面时，仅在可编辑div内的内容上，我想从表中删除ClassTwo并且无法正确使用

＆＃13;

var iDoc;

iDoc = document.getElementById("MyEditor");
iDoc.focus();

  function postedTableCap() {
  alert("called");
	$('.ClassTwo td:first').focus();
      };

   function insertTable(position, height, width, rows, columns, bkcolor, bcolor, bsiz, bstyle) {
        var mybody = document.getElementById("MyEditor");

        mytable = document.createElement("table");
        mytablebody = document.createElement("tbody");

        for (var r = 0; r < rows; r++) {
            mycurrent_row = document.createElement("tr");

            for (var c = 0; c < columns; c++) {
                mycurrent_cell = document.createElement("td");
                mycurrent_row.appendChild(mycurrent_cell);
            }
            mytablebody.appendChild(mycurrent_row);
        }

        mytable.appendChild(mytablebody);
        mybody.appendChild(mytable);
        mytable.className = "ClassOne";
        mytable.classList.add("ClassTwo");
        mytable.style.height = height + 'px';
        mytable.style.width = width + 'px';
        if (!(bsiz === undefined || bsiz === null)) {
            mytable.style.borderColor = "#" + bcolor;
            mytable.style.borderWidth = bsiz + 'px';
            mytable.style.borderStyle = bstyle;
        };
        mytable.style.backgroundColor = '#' + bkcolor;

        if (position == 1) {
            //mytable.style.width = "auto"
            mytable.style.marginLeft = "0px";
            mytable.style.marginRight = "auto";
        }
        else if (position == 2) {
            //mytable.style.width = "auto"
            mytable.style.marginLeft = "auto";
            mytable.style.marginRight = "auto";
        }
        else if (position == 3) {
            //mytable.style.width = "auto"
            mytable.style.marginLeft = "auto";
            mytable.style.marginRight = "0px";
        };
    };
    
    
$("#MyBtn").click(function () {
       var d1 = $.Deferred();

        $.when(d1).then(function () {
            $(".GSM-i-tbl-active").focus().blur();
            $('.TableOptions').hide();
            postedTableCap();                
        })

        d1.resolve(insertTable(2, 200, 200, 3, 3, "#ff0000", "#0000FF", 1, "solid"));
        
    });

＆＃13;

table.ClassOne tr td{
  border: 1px solid lightgrey;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="MyBtn">
InsertTable
</button>
<div id="MyEditor" contenteditable="true" style="height:300px; width:300px; background-color:white;"></div>

＆＃13;

Answer 1

您的代码有两个错误。第一个是你过早地调用焦点（我看到你知道它并尝试用延迟解决它...）。您可以注意到，当显示警告对话框时，javascript引擎被冻结，现在是时候看到您尝试关注的表甚至还不存在。您必须等待当前调用循环结束才能进行绘图。我已经使用了window.setTimeout来确保在完成所有操作后调用它。

下一个错误：您只能关注“可聚焦”元素。这包括输入，contentEditables，按钮，链接等。但不是表格单元格，即使它们位于contentEditable中。您最好的选择是使用文档选择，获取文档选择并将其折叠到您选择的节点上。

var iDoc;

iDoc = document.getElementById("MyEditor");
iDoc.focus();

function postedTableCap() {
  var sel = document.getSelection();
  sel.collapse($('.ClassTwo td:first')[0]);
};

function insertTable(position, height, width, rows, columns, bkcolor, bcolor, bsiz, bstyle) {
  var mybody = document.getElementById("MyEditor");

  mytable = document.createElement("table");
  mytablebody = document.createElement("tbody");

  for (var r = 0; r < rows; r++) {
    mycurrent_row = document.createElement("tr");

    for (var c = 0; c < columns; c++) {
      mycurrent_cell = document.createElement("td");
      mycurrent_row.appendChild(mycurrent_cell);
    }
    mytablebody.appendChild(mycurrent_row);
  }

  mytable.appendChild(mytablebody);
  mybody.appendChild(mytable);
  mytable.className = "ClassOne";
  mytable.classList.add("ClassTwo");
  mytable.style.height = height + 'px';
  mytable.style.width = width + 'px';
  if (!(bsiz === undefined || bsiz === null)) {
    mytable.style.borderColor = "#" + bcolor;
    mytable.style.borderWidth = bsiz + 'px';
    mytable.style.borderStyle = bstyle;
  };
  mytable.style.backgroundColor = '#' + bkcolor;

  if (position == 1) {
    //mytable.style.width = "auto"
    mytable.style.marginLeft = "0px";
    mytable.style.marginRight = "auto";
  } else if (position == 2) {
    //mytable.style.width = "auto"
    mytable.style.marginLeft = "auto";
    mytable.style.marginRight = "auto";
  } else if (position == 3) {
    //mytable.style.width = "auto"
    mytable.style.marginLeft = "auto";
    mytable.style.marginRight = "0px";
  };
};


$("#MyBtn").click(function() {
  var d1 = $.Deferred();

  $.when(d1).then(function() {
    $(".GSM-i-tbl-active").focus().blur();
    $('.TableOptions').hide();
    window.setTimeout(postedTableCap, 0);
  })

  d1.resolve(insertTable(2, 200, 200, 3, 3, "#ff0000", "#0000FF", 1, "solid"));

});

table.ClassOne tr td {
  border: 1px solid lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="MyBtn">
InsertTable
</button>
<div id="MyEditor" contenteditable="true" style="height:300px; width:300px; background-color:white;"></div>

关于你的第二个问题，如何对contentEditable中的选择/取消选择作出反应，你应该阅读this one之类的问题。诀窍是再次使用选择，并监听点击事件以了解它何时发生变化，看看是否应该添加或删除该类。

将重点放在可编辑的项目

1 个答案: