之前看到问题 小程序点击发送保持键盘打开状态 按常规答了一下
点击按钮 的处理，最后 让输入框重新获取焦点，应该就可以
小程序里 应该是有个 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 = '> ' + 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>