contenteditable = "true" 创建的文本框,如何删除光标前一位字符

你可以使用JavaScript的Selection和Range对象来删除光标前一位字符。具体实现步骤如下：

1. 获取当前光标所在位置的Range对象。

var selection = window.getSelection();
var range = selection.getRangeAt(0);

2. 将光标位置向前移动一位。

range.setStart(range.startContainer, range.startOffset - 1);

3. 删除光标前一位字符。

range.deleteContents();

完整的代码如下：

var selection = window.getSelection();
var range = selection.getRangeAt(0);
range.setStart(range.startContainer, range.startOffset - 1);
range.deleteContents();

这样就可以删除光标前一位字符了。

相关问题

<tr> <td contenteditable="true">工艺膜层</td> <td contenteditable="true">AOI Step</td> <td contenteditable="true">不良类型</td> <td contenteditable="true">Layer（Code）</td> <td contenteditable="true">Type</td> <td contenteditable="true">Dept</td> <td contenteditable="true">Subcode</td> <td contenteditable="true">Code描述</td> <td contenteditable="true">Image1</td> <td contenteditable="true">Image2</td> <td contenteditable="true">Image3</td> <td contenteditable="true">Image4</td> <td contenteditable="true">Image5</td> <td contenteditable="true">Image6</td> <td contenteditable="true">判定细则</td> </tr>

这段代码是一个HTML表格中的一行数据（<tr>表示table row，即表格中的一行）。其中每个单元格（<td>）都设置了contenteditable属性为true，表示该单元格内容可编辑。这个表格可能用于记录某个工艺过程中的不良情况，每个单元格表示不同的信息，例如：

- 工艺膜层
- AOI Step
- 不良类型
- Layer（Code）
- Type
- Dept
- Subcode
- Code描述
- Image1
- Image2
- Image3
- Image4
- Image5
- Image6
- 判定细则

这些信息可能是用于记录某个工艺过程中的不良情况，每个单元格表示不同的信息。其中，Image1到Image6可能是用于记录不良情况的照片或者截图，而判定细则可能是用于记录不良情况的判定标准。

span contenteditable="true" 设置光标位置

在使用 `contenteditable="true"` 属性的 HTML 元素中，可以通过 JavaScript 来设置光标的位置。可以使用 `window.getSelection()` 方法获取当前选择区域的信息，然后通过 `Range` 对象的各种方法来设置光标位置。以下是一个简单的示例：

<div contenteditable="true" id="myEditable">这是一个可编辑的区域</div>

const editable = document.querySelector('#myEditable');
const range = document.createRange();
const selection = window.getSelection();
range.setStart(editable.childNodes[0], 5); // 设置光标起始位置
range.collapse(true); // 光标结束位置与起始位置重合
selection.removeAllRanges(); // 移除所有选择区域
selection.addRange(range); // 添加新的选择区域，此时光标位置就被设置到了指定位置

在上面的代码中，我们首先获取了具有 `contenteditable="true"` 属性的 `<div>` 元素，然后通过 `document.createRange()` 方法创建了一个新的 `Range` 对象。接下来，我们设置了这个 `Range` 对象的起始位置，并通过 `collapse()` 方法将光标的结束位置设置为和起始位置重合。然后，我们通过 `window.getSelection()` 方法获取到当前的选择区域，使用 `removeAllRanges()` 方法移除所有选择区域，最后通过 `addRange()` 方法将新的选择区域添加进去，此时光标位置就被设置到了指定位置。