有时候，用手机看网页，特别是用Canvas做动画的那类，会碰到点儿烦心事儿。比如，想在安卓机子上输点字儿，结果怎么也打不开键盘，或者开了又关不上。这可真让人抓狂！今儿个，我就给大伙儿说说这破事儿到底咋回事儿，还有我是咋搞定它的。
问题初现：安卓手机的键盘困扰
$('#button').on('touchstart', function() {
window.location.href = 'xx.html'
})
那天我搞移动端网页，要使canvas动起来就加了createjs.touch.enable(stage,true,false)。没想到，这下子问题大了！输入框和点按事件全失灵，点输入框键盘也不出，咋办？
苹果手机的顺利与安卓手机的坎坷
我研究了下这个问题，发现苹果手机关掉键盘再点开没事儿，安卓手机却不行，键盘关了还能看到光标，就是弹不出第二次。这可真让人头大！
寻找解决办法：触摸事件控制焦点
$('#input').on('touchstart', function() {
$(this).focus()
})
原来点击不行了，那我得试试摸下能不能弹出输入法。试了几下发现，虽然能用触摸搞出来，但还是解决不了根本问题。
另辟奇径：删除并生成新的input
我研究好久，想给关掉键盘的那个操作添上个失去焦点时咋整的功能，就是找不着这事儿。后来，我就换个思路。每次点input，我就把旧的input删了，再弄个新input放那儿。这样，新的input就能抢到焦点，然后弹出来打字
实现代码：html与js的结合
为实现这个小功能，我搞出了一些html和js的小把戏。html部分就简单，就是一个输入框。至于js，稍微有点难度，就是要在你点下那个输入框的时候，把原先的删掉，再弄个新的出来。
效果验证：问题终于解决了
累死累活的，总算把那个烦人的问题搞定了！在安卓手机上点input框就能弹出来键盘，还能连着弹好几次，可给我乐坏了！
总结与思考：移动端开发的艰辛与乐趣
这段经历真的让我感受到了手机软件开发有多辛苦又有趣！每次搞定一点儿问题都让我特别有成就感。而且，我发现这个领域还有好多东西等着我们去发掘。
向读者提问：你遇到过类似的问题吗？
最后来个小问题有木有人也遇到过我们这种情况呀？怎么搞定的？快来评论区聊聊呗！大家互相交流下，共同进步。
$('#btn').on('touchstart', function() {
var value = $('input').val()
$('input').remove()
$('.box').html('')
if(value!=''){
$('input').val(value)
}
$('input').focus()
})
评论0