table contenteditable

table contenteditable是指将table元素的contenteditable属性设置为true，使其可编辑。这意味着用户可以直接在table中编辑内容，包括文本、图像等。通过添加contentEditable="true"属性，可以将特定的单元格或整个表格设置为可编辑。例如，可以使用以下代码将table的某个单元格设置为可编辑：

<table>
  <tr>
    <td>姓名：</td>
    <td contentEditable="true"></td>
  </tr>
  <tr>
    <td>密码：</td>
    <td contentEditable="true"></td>
  </tr>
</table>

在这个例子中，通过将第二个td元素的contentEditable属性设置为true，使其成为可编辑的单元格。用户可以在该单元格中输入姓名和密码。

在Vue项目中，如果需要实现一个可编辑的文本输入框组件，可以使用div元素并设置contenteditable属性为true。但是，这种方式可能会导致光标丢失的问题。为了解决这个问题，可以使用以下代码将光标定位到最后：

function keepLastIndex(obj) {
  obj.focus();
  var range = document.createRange();
  range.selectNodeContents(obj);
  range.collapse(false);
  var selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
}

通过调用keepLastIndex函数并传入需要定位光标的div元素，可以将光标定位到最后。这样，在非手动输入值后，光标仍然会保留在输入框中。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* [table点击实现可编辑文本](https://blog.csdn.net/qq_23350817/article/details/84625165)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [Vue中div contenteditable 的光标定位方法](https://download.csdn.net/download/weixin_38606041/13208197)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]