contenteditable绑定onkeydown在安卓移动端失效，如何实现跨端字符限制及输入框自适应高度

1. contenteditable 跨端字符数限制方案 #

你原代码中onkeydown在安卓端失效的原因是：移动端软键盘输入、语音输入等场景不会触发键盘类事件，只有input事件能全场景覆盖。以下是兼容桌面、安卓、iOS端的实现：

代码实现 #

<!-- 移除内联事件，逻辑统一用JS处理 -->
<div contenteditable="true" placeholder="RUN A AWAY" id="quote__text" class="editable"></div>

const editableEl = document.getElementById('quote__text')
const MAX_LENGTH = 11 // 最大可输入字符数
let lastValidContent = '' // 存储上一次符合长度要求的内容
let isComposing = false // 标记是否正在进行中文/日文等合成输入

// 合成输入开始时标记状态，避免输入拼音时误截断
editableEl.addEventListener('compositionstart', () => {
  isComposing = true
})

// 合成输入结束后触发校验
editableEl.addEventListener('compositionend', () => {
  isComposing = false
  editableEl.dispatchEvent(new Event('input'))
})

// 核心输入监听，全端兼容
editableEl.addEventListener('input', () => {
  if (isComposing) return // 合成输入过程中不做校验
  const currentText = editableEl.innerText
  if (currentText.length <= MAX_LENGTH) {
    lastValidContent = currentText
    return
  }
  // 超出长度时回退到上一次合法内容
  editableEl.innerText = lastValidContent
  // 修复光标跳转到开头的问题
  const range = document.createRange()
  const selection = window.getSelection()
  range.selectNodeContents(editableEl)
  range.collapse(false)
  selection.removeAllRanges()
  selection.addRange(range)
})

// 禁止粘贴，和原有逻辑保持一致
editableEl.addEventListener('paste', e => e.preventDefault())

2. 输入框自动扩展高度实现方案 #

原生<input>是单行元素，本身不支持高度扩展，改用<textarea>模拟即可实现需求，同时可以搭配字符限制逻辑：

代码实现 #

<!-- rows设为1，默认单行展示 -->
<textarea id="autoHeightInput" placeholder="输入内容" rows="1"></textarea>

#autoHeightInput {
  resize: none; /* 禁止用户手动拖拽调整大小 */
  overflow: hidden; /* 隐藏滚动条 */
  min-height: 24px; /* 单行最小高度，可自行调整 */
  line-height: 24px;
  padding: 4px 8px;
  border: 1px solid #e5e7eb;
}

const textareaEl = document.getElementById('autoHeightInput')
const MAX_LENGTH = 11 // 最大可输入字符数

// 自动调整高度逻辑
const adjustHeight = () => {
  // 先重置高度，实现内容减少时高度自动收缩
  textareaEl.style.height = 'auto'
  textareaEl.style.height = `${textareaEl.scrollHeight}px`
}

// 输入时同时做字符限制和高度调整
textareaEl.addEventListener('input', () => {
  if (textareaEl.value.length > MAX_LENGTH) {
    textareaEl.value = textareaEl.value.slice(0, MAX_LENGTH)
  }
  adjustHeight()
})

// 页面加载时如果有默认值，主动触发一次高度调整
window.addEventListener('load', adjustHeight)

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