实现react、vue项目H5页面，在IOS环境跨页面跳转自动获
2023-05-30 本文已影响0人
码农私房菜
问题场景：
在ios的webview无法通过autofocus属性动态获取焦点，所以通过全局挂载input的方式来变相的触发获取焦点，唤起键盘，达到手动实现跨页面获取焦点的需求。
html 静态页面（必须有一个全局的input来拉起输入框）
核心思路及代码及实现
- 全局隐式挂载一个不可见的input输入框
- 以react组件做示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自动获取焦点</title>
</head>
<body>
// 全局挂载输入框，开启定位隐藏掉
<input
type="text"
value=""
style="background:rgb(91, 237, 29);position:fixed;left: -1000px;z-index: -1;width: 0px;height: 0px;"
id="TRANSITION_INPUT"
/>
// 初始化全局挂载输入框，方便后续逻辑处理
<script>
window['TRANSITION_INPUT'] = document.querySelector( '#TRANSITION_INPUT')
window['TRANSITION_INPUT'].value = ''
</script>
// 输入框放在挂载容器`#root`的同级
<div id="root"></div>
</body>
</html>
A页面
核心思路及代码及实现
- 通过调用上文挂载到全局的输入框
'#TRANSITION_INPUT的focus()获取焦点，来唤起输入键盘 - 以react组件做示例：
import React, { FC } from 'react'
const SearchA: FC<IProps> = (props: IProps) => {
return (
<div className="renew-search-box">
<div
className="renew-search"
onClick={() => {
// 在A页面触发全局html的聚焦事件，唤起输入框弹窗
window['MY_Transition_input_135246'].focus()
// 跳转B页面
props.history.push(props.url)
}}
>{placeholder}</div>
</div>
)
}
export default SearchA
B页面
核心思路及代码及实现
- 使用input上的
setSelectionRange()方法获取光标 - 以react组件做示例：
import React, { FC, useEffect } from 'react'
const SearchB: FC<IProps> = (props: IProps) => {
useEffect(() => {
// 组件监听设置当前输入框，激活光标位置，获取焦点
function getSelect(start: any, end: any) {
// 获取当前B组件的输入框
const editValue: any = document.querySelector( ' input[type=search]')
// 设置光标位置
editValue.setSelectionRange(start, end)
}
// 设置光标到输入文字尾部
getSelect(0, inputRef.current.selectionEnd + 1)
return () => {
// 组件销毁时初始化全局输入框状态
window['MY_Transition_input_135246'].blur()
window['MY_Transition_input_135246'].value = ''
}
}, [searchValue])
return (
<input
ref={inputRef}
name={Math.random().toString()}
type="search"
placeholder={placeholder}
/>
)}
export default SearchB
