灵光乍现解决移动端保持键盘打开状态

最新推荐文章于 2022-05-16 21:44:21 发布

weixin_34205826

最新推荐文章于 2022-05-16 21:44:21 发布

阅读量212

点赞数

文章标签： ui

原文链接：https://segmentfault.com/a/1190000017431055

版权

之前看到问题小程序点击发送保持键盘打开状态按常规答了一下

点击按钮的处理，最后让输入框重新获取焦点，应该就可以
小程序里应该是有个 focus 属性，去查下文档吧

昨天看到消息提示，有人回复，去瞟了一眼
关于界面闪烁，这就是个老问题，一直也没有什么解决方法

稍稍想一想，刚准备抛到脑后，继续工作，突然间 灵光乍现
这问题的解决方案就是个 脑筋急转弯 嘛

1. 弹出键盘的原因是输入控件获得焦点，系统认为用户需要输入
2. 键盘收起的原因是输入控件失去焦点，系统认为用户不需要输入了

我们用的发送按钮，是个控件，但不是输入控件
点击后，原输入控件失去焦点，获得焦点的是个非输入控件，键盘收起

这里先思考一个问题：
如果从焦点从A输入控件跳到 B输入控件，键盘是不是就不会收起
其实不用试，肯定不收起，不然这样闪来闪去的一定会被测试打回来的

提示都已经写到这么明显了，各位灵光乍现了没 ^_^

解决方案就是：用 CSS 把输入控件做成按钮的样子

当然还有细节需要处理，但是闪烁这个大问题是圆满解决了。

主要的一个细节问题：输入控件的光标闪烁
按钮要有按钮的样子，获取焦点后有个闪烁光标总是不合时宜的
解决方案异常简单，把焦点再重置到原输入控件
关于按钮样式，鼠标事件响应及UI反馈这种小问题，大家自己搞定吧

下面是基本实现，供参考

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>Wechat Input Focus</title>
    <style type="text/css">
    html, body {margin:0;padding:0;}
    body {min-height:100vh;}
    .grid {border-collapse:collapse;width:100%;font-size:24px;box-sizing:border-box;}
    .grid td {font:inherit;}
    .grid td.max {width:100%;}
    .grid td.min {width:1px;white-space:nowrap;}
    .grid td input {font:inherit;}
    .grid td .text {width:100%;padding:0 0.5em;border:1px solid #999;box-sizing:border-box;}
    .grid td .txt-send {width:4em;padding:0 0.5em;text-align:center;border:1px solid #999;box-sizing:border-box;background-color:#CCC;}
    </style>
    <script>
    document.addEventListener('DOMContentLoaded', function(){

        let domText = document.querySelector('.text');
        let domTxtSend = document.querySelector('.txt-send');

        let domSendData = document.querySelector('.send-data');

        domTxtSend.addEventListener('focus', function($evt){

            domText.focus();

            let dom = document.createElement('DIV');
            dom.innerHTML = '&gt;&ensp;' + domText.value;

            domSendData.appendChild(dom);

            domText.value = '';
        });
    });
    </script>
</head>
<body>
<table class="grid">
    <tr>
        <td class="max"><input type="text" class="text" placeholder="请输入内容"/></td>
        <td class="min">
            <input type="text" class="button txt-send" readonly="readonly" value="发送"/>
        </td>
    </tr>
</table>
<div class="send-data"></div>
</body>
</html>

weixin_34205826

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
灵光乍现解决移动端保持键盘打开状态

之前看到问题小程序点击发送保持键盘打开状态按常规答了一下点击按钮的处理，最后让输入框重新获取焦点，应该就可以小程序里应该是有个 focus 属性，去查下文档吧昨天看到消息提示，有人回复，去瞟了一眼关于界面闪烁，这就是个老问题，一直也没有什么解决方法稍稍想一想，刚准备抛到脑后，继续工作，突然间灵光乍现这问题的解决方案就是个...
复制链接

扫一扫

灵光乍现 解决移动端保持键盘打开状态

“相关推荐”对你有帮助么？

灵光乍现解决移动端保持键盘打开状态