如何实现用户点击软键盘backspace/erase键时触发指定功能

以下是不同开发场景下的可行实现方式：

Web前端场景 #

• 基础实现：监听全局keydown事件，匹配退格键编码即可触发自定义逻辑

document.addEventListener('keydown', event => {
  // 匹配退格键触发
  if (event.code === 'Backspace') {
    // 此处写入需要执行的自定义功能代码
    // 若需要阻止默认的删除内容行为，可添加 event.preventDefault()
  }
})

• 适配软键盘专属触发、过滤物理键盘误触：搭配输入框内容长度校验逻辑实现

const targetInput = document.querySelector('#你的输入框ID')
let lastContentLength = 0

// 输入框聚焦时记录初始长度，开启监听
targetInput.addEventListener('focus', () => {
  lastContentLength = targetInput.value.length
})

// 输入事件触发时对比长度判断是否为退格操作
targetInput.addEventListener('input', () => {
  const currentLength = targetInput.value.length
  // 内容长度变短且没有选中批量删除的内容时，判定为软键盘退格触发
  if (currentLength < lastContentLength && window.getSelection().toString() === '') {
    // 执行自定义逻辑
  }
  lastContentLength = currentLength
})

Android原生场景 #

• 重写输入控件的onKeyDown方法匹配退格键编码

override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
  if (keyCode == KeyEvent.KEYCODE_DEL) {
    // 执行自定义逻辑
    // 不需要拦截默认删除行为就返回 super.onKeyDown(keyCode, event) 即可
    return true
  }
  return super.onKeyDown(keyCode, event)
}

• 适配第三方输入法可以搭配TextWatcher监听文本长度变化，和Web端的长度对比逻辑一致即可过滤异常触发。

iOS原生场景 #

• 重写输入控件的deleteBackward方法直接捕获退格操作

class CustomTextField: UITextField {
  override func deleteBackward() {
    super.deleteBackward()
    // 执行自定义逻辑
  }
}

• 也可以通过代理方法判断删除行为

func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
  // 替换字符串为空时即为退格操作
  if string.isEmpty {
    // 执行自定义逻辑
  }
  return true
}

内容的提问来源于stack exchange，提问作者mockingbird