兼容性问题日常踩坑记录

ios兼容性问题

1. 无法将字符串“yyyy-mm-dd hh:mm:ss”转换成时间格式

解决方案：

time = time.replace(/\-/g, "/")
// 转换成“yyyy/mm/dd hh:mm:ss”格式

2. 输入框点击无反应无法输入

解决方案：

.textInput{
  textarea{
    -webkit-user-select:text !important;
  }
}

3. 无法自动聚焦唤起输入框

**场景：**页面留言功能需要点击一个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;
}

4. replaceChildren 13.7以下版本不支持

场景：需要清空dom节点下的所有子节点，用dom..replaceChildren() 发现ios 13.7以下版本不支持

解决方案：用dom.innerHTML = ''; 清空dom节点下的所有子节点

安卓兼容性问题

-- 暂无 --