首先,在页面上有一个 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 中有光标但是无法唤起虚拟键盘。 在网上搜了一圈,貌似也没找到太多相关资料
1
joesonw 2020-07-06 18:32:45 +08:00 1
|
2
KuroNekoFan 2020-07-07 10:01:20 +08:00
scroll 一下,focus 一下试试
|
3
holybig 2020-07-07 14:17:01 +08:00
onClick 改 onFocus
|
4
fancy2020 OP 1 楼的方案可以解决,谢谢大家
|
5
xingyuc 2020-07-07 17:03:23 +08:00
setTimeout 试试
|