之前看到问题 小程序点击发送保持键盘打开状态 按常规答了一下
点击按钮 的处理,最后 让输入框重新获取焦点,应该就可以
小程序里 应该是有个 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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。