1、ios无法将字符串“yyyy-mm-dd hh:mm:ss”转换成时间格式
time = time.replace(/\-/g, "/")
// 转换成“yyyy/mm/dd hh:mm:ss”格式
2、IOS输入框点击无反应无法输入
解决方法:
.textInput{
textarea{
-webkit-user-select:text !important;
}
}
3、IOS无法自动聚焦唤起输入框
场景:页面留言功能需要点击一个div时才出现留言框并且使留言框的input区域自动聚焦以唤起键盘,为了方便复用,一开始我将这个留言框以modal弹窗的形式封装了出来,然后监听visible,当它为true的时候调用focus()自动聚焦方法唤起键盘,但是这样ios输入框focus()自动聚焦方法失效导致无法唤起键盘
解决方法:不要用modal,用fixed定位,在visible为false的时候设置z-index为-1隐藏,为true的时候设置更高的层级显示,并且要在外部点击事件中加focus()聚焦
/**
*
* 外部调用这个组件唤醒输入框时,需要用这一行代码: ref.current.focus()
* 使用示例:
*
* <CommentInput type={1} closeInput={closeInput}
visible={visible}
send = {点击发送按钮后需要调用的方法}
ref={inputRef}
/>
*
* // 唤醒键盘
const wakeUp = ()=>{
if(inputRef.current){
inputRef.current.focus()
setVisible(true)
}
}
*/
import React ,{FC,forwardRef,useState,useEffect} from "react";
import styles from './index.less'
interface Props{
visible:boolean
type:number // 1-文章详情的评论 2-回复留言的评论
closeInput:()=>void //关闭输入框
replayName?:String //被回复的用户
send:(value)=>void //点击发送按钮时需要调用的方法
}
const CommentInput = forwardRef<any,Props>((props,ref)=>{
const {type,closeInput,visible,replayName,send} = props
const [value,setValue] = useState("")
const [zIndex,setZInex] = useState(-1)
const onChange = (e)=>{
setValue(e.target.value)
}
const sendMessage = ()=>{
send(value)
}
useEffect(()=>{
if(!visible){
setValue("")
setZInex(-1)
}else{
setZInex(9999)
}
},[visible])
const handleClick = (e)=>{
e.stopPropagation();
}
return (
<div className={styles.InputBG}
onClick={closeInput}
style={{zIndex:zIndex,
backgroundColor:zIndex>0?"rgba(0, 0, 0, 0.278)":undefined,
}}
>
<div className={styles.CommentInput}
onClick={handleClick}
>
{
type===1?
<div className={styles.text1}>
<textarea placeholder="精彩留言将筛选后显示"
onChange={onChange}
value={value}
ref={ref}
/>
<span className={value.trim()===""?styles.send:styles.send2}
onClick={sendMessage}
>
发送
</span>
</div>
:
<div className={styles.text2}>
<div className={styles.top} style={{ opacity:zIndex>0?"1":"0"}}>
回复
<span className={styles.name}>{replayName}:</span>
</div>
<div className={styles.text2Input}>
<textarea ref={ref} placeholder="请输入留言"
onChange={onChange}
value={value}
/>
<span className={value.trim()===""?styles.send:styles.send2}
onClick={sendMessage}
>
发送
</span>
</div>
</div>
}
</div>
</div>
)
})
export default CommentInput
css代码
.InputBG{
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
top: 0;
display: flex;
align-items: flex-end;
justify-content: flex-end;
flex-direction:column;
}