靈光乍現 解決移動端保持鍵盤開啟狀態

Fractal發表於2019-02-16

之前看到問題 小程式點選傳送保持鍵盤開啟狀態 按常規答了一下

點選按鈕 的處理，最後 讓輸入框重新獲取焦點，應該就可以
小程式裡 應該是有個 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>

相關文章