html文本框撤回修改内容,原生js实现HTML输入框撤销、重做功能

HTML代码：

Document

上一步(撤销)

下一步(重做)

JS代码：

/**

* 记录输入框的操作记录，可以进行上一步(撤销)或下一步(重做)操作

*

*/

const inputEl = document.querySelectorAll('#textarea')[0]

const previousEl = document.querySelectorAll('#previous')[0]

const nextEl = document.querySelectorAll('#next')[0]

// 操作数组

const operateList = []

// 按键按下时记录的输入框的信息

let beforeInputInfo = null

// 当前操作的下标，范围：[-1, operateList.length - 1]。-1代表一开始的空状态

let operateIndex = -1

// 最大操作数，超过时，最前面的操作会被丢弃

const MAX_OPERATE_NUMBER = 200

let isComposing = false

inputEl.oninput = function(e) {

console.log('oninput', this.value, this.value && this.value.length, e.isComposing)

if(isComposing) {

return

}

recordOperate(e)

}

// 按键按下时保存输入框信息

inputEl.onmousedown = function(e) {

beforeInputInfo = getCurrentOperateInfo(e)

}

// 按键按下时保存输入框信息

inputEl.onkeydown = function(e) {

beforeInputInfo = getCurrentOperateInfo(e)

}

// compositionstart和compositionend通过onxxx的方式无法绑定事件

inputEl.addEventListener('compositionstart',function(e) {

console.log('oncompositionstart')