54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
|
import { isIOS } from '@tencentcloud/universal-api';
|
|||
|
|
const ua = navigator.userAgent;
|
|||
|
|
|
|||
|
|
function getScrollTypeByPlatform() {
|
|||
|
|
if (isIOS) {
|
|||
|
|
if (/Safari\//.test(ua) || /IOS 11_[0-3]\D/.test(ua)) {
|
|||
|
|
// Safari IOS 11.0-11.3 exclude（`scrollTop`/`scrolIntoView` not working）
|
|||
|
|
return 0;
|
|||
|
|
}
|
|||
|
|
// IOS: use `scrollTop`
|
|||
|
|
return 1;
|
|||
|
|
}
|
|||
|
|
// Android: use `scrollIntoView`
|
|||
|
|
return 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function riseInput(input: HTMLElement, target?: HTMLElement) {
|
|||
|
|
const scrollType = getScrollTypeByPlatform();
|
|||
|
|
let scrollTimer: ReturnType<typeof setTimeout>;
|
|||
|
|
|
|||
|
|
if (!target) {
|
|||
|
|
// eslint-disable-next-line no-param-reassign
|
|||
|
|
target = input;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const scrollIntoView = () => {
|
|||
|
|
if (scrollType === 0) return;
|
|||
|
|
if (scrollType === 1) {
|
|||
|
|
document.body.scrollTop = document.body.scrollHeight;
|
|||
|
|
} else {
|
|||
|
|
target?.scrollIntoView(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
input.addEventListener('focus', () => {
|
|||
|
|
const timer = setTimeout(() => {
|
|||
|
|
scrollIntoView();
|
|||
|
|
clearTimeout(timer);
|
|||
|
|
}, 300);
|
|||
|
|
scrollTimer = setTimeout(scrollIntoView, 1000);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
input.addEventListener('blur', () => {
|
|||
|
|
clearTimeout(scrollTimer);
|
|||
|
|
// Handle IOS issues about keyboard is hidden but page not refreshed
|
|||
|
|
if (scrollType && isIOS) {
|
|||
|
|
const timer = setTimeout(() => {
|
|||
|
|
document.body.scrollIntoView();
|
|||
|
|
clearTimeout(timer);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|