如何让光标始终显示在编辑框的可视区域内?

移动端 web,需要做一个编辑器输入框。HTML大致如下:

HTML:
<body contenteditable="true"></body>

CSS:
html, body{
    height: 100%;
}

在 body 里输入内容,因为移动端有个虚拟键盘,当内容高度超出可视区域高度时,光标就在可视区域以下了。怎样让光标始终显示在可视区域呢?

(能兼容 safari mobil 浏览器即可)

阅读 5.3k
1 个回答

恰好我也遇到過這個問題。
這是 Safari 的一個 bug。

解決方案很簡單,就是把 contenteditable 放在一個固定大小的元素當中,這樣當溢出的時候就能自動滾動了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题