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>