测试iOS底部输入对软键盘的处理

解决软键盘唤起时页面底部input输入框被遮挡问题

js, mobile

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 800
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const ia = document.getElementById("inputArea")

function iosInput() {
    var _oldScrolltop = document.body.scrollTop; //备份软键盘唤起前浏览器滚动部分的高度
    $(".myinput").focus(function() { // 获取焦点即触发软键盘时事件处理
        ia.scrollIntoViewIfNeeded()
        $("#log").text('input focused ... ')
        setTimeout(function() { //设置一个计时器，时间设置与软键盘弹出所需时间相近
            // document.body.scrollTop = document.body.scrollHeight; //将浏览器内所有内容高度赋给浏览器滚动高度
            window.scrollTo(0, 0);
            document.body.scrollTop = 0;

const scrollTxt = 'scroll: ' + document.body.scrollHeight + ' '
            const fullTxt = 'full: ' + window.innerHeight + ' '
            $("#log").append(document.createTextNode(scrollTxt))
            $("#log").append(document.createTextNode(fullTxt))

if (window.visualViewport) {
                const visTxt = ' visual: ' + window.visualViewport.height
                $("#log").append(document.createTextNode(visTxt))
                ia.style.bottom = window.innerHeight - window.visualViewport.height + "px"
            }

}, 100)
    }).blur(function() { //设定输入框失去焦点时的事件
        document.body.scrollTop = _oldScrolltop; // 恢复
        ia.style.bottom = 0
    });
}

iosInput()

编译

CSS

HTML

解决软键盘唤起时页面底部input输入框被遮挡问题

js, mobile

编辑器支持Emmet

快捷键

解决软键盘唤起时页面底部input输入框被遮挡问题

js, mobile

用Anime.js做的AWSM动效LOGO

animejs实现沿SVG路径的运动动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：