被一个 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 中有光标但是无法唤起虚拟键盘。 在网上搜了一圈，貌似也没找到太多相关资料