被一个 iOS Safari 上的问题恶心到了

首先，在页面上有一个 input，然后在 js 中动态的改变 input 的 readOnly 属性，比如点击 input 的时候取消 readonly 属性，onblur 的时候加上 readonly 使它变为只读的。

比如如下 React 代码：

1 import React, { useState, useRef } from 'react';
 2 import logo from './logo.svg';
 3 import './App.css';
 4
 5 function App() {
 6   const [editable, setEditable] = useState(true);
 7   const ref = useRef();
 8
 9   function handleClick() {
10   ┆ setEditable(true);
11   }
12
13   function handleBlur() {
14   ┆ setEditable(false);
15   }
16
17   return (
18   ┆ <div className="App">
19   ┆ ┆ <input
20   ┆ ┆ ┆ ref={ref}
21   ┆ ┆ ┆ onClick={handleClick}
22   ┆ ┆ ┆ onBlur={handleBlur}
23   ┆ ┆ ┆ readOnly={!editable}
24   ┆ ┆ />
25   ┆ </div>
26   );
27 }
28
29 export default App;

然后在 iOS Safari 上的表现是，当 readOnly 由 false 变为 true 的时候，input 中有光标但是无法唤起虚拟键盘。 在网上搜了一圈，貌似也没找到太多相关资料