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

Fractal

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

点击按钮 的处理,最后 让输入框重新获取焦点,应该就可以
小程序里 应该是有个 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>
阅读 1.4k
3.9k 声望
27 粉丝
0 条评论
你知道吗?

3.9k 声望
27 粉丝
文章目录
宣传栏