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

时间 2019-11-09

标签 smtc 灵光乍现解决移动保持键盘打开状态栏目无线繁體版

原文原文链接

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

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

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

1. 弹出键盘的缘由是输入控件得到焦点，系统认为用户须要输入
2. 键盘收起的缘由是输入控件失去焦点，系统认为用户不须要输入了

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

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

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

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

固然还有细节须要处理，可是闪烁这个大问题是圆满解决了。spa

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

下面是基本实现，供参考code

<!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>

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

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