html5输入法完成事件,【已解决】HTML中如何获取输入框的输入法的搜索或完成按钮的事件...

现在已经实现了一个web网页的输入框，然后点击搜索：

但是现在想要实现：

在手机端，当输入内容时，所弹出的输入法，用户点击 搜索 Done 完成 之类按钮时，能否获取对应事件，触发搜索

即：键盘中 完成键 触发 搜索

希望点击 搜索 可以捕获到，触发搜索

html keyboard done event

html input keyboard done event

用代码：$('#inputQuery').bind("keypress", function(e){

console.log("inputQuery keypress: e=%o", e)

// enter key code is 13

if(e.which === 13){

console.log("user pressed done");

}

})

发现是可以获取到Enter键的：

感觉这几个值最有用：key: "Enter"

keyCode: 13

type: "keypress"

which: 13

然后

放到在线页面中，此处：

Mac的Chrome中可以正常work的

但是Mac的Safari中不行，

Android和iOS也都不行

不知道是否是缓存问题？

难道是：

keypress bind 对于Safari无效？

对移动端浏览器都无效?

jquery bind keypress not working

过了会，Mac中Safari中工作了：

Mac中Safari模拟iOS也是可以的：

看到检测，感觉有点怪：

if(keycode == ’13’){

不是数字13，而是字符串13

再去调试：

此处的确是数字13，不是字符串：

数字此处是N，字符串是S

所以现在是PC端浏览器都可以支持keypress

但是移动端浏览器iOS或Android都不支持

继续调试发现：

Android端Chrome浏览器是支持的keypress的：

jquery mobile keypress not working

Jquery: not working in Mobile’s browser where as working in Windows7’s browser in laptop | The ASP.NET Forums

keypress not working mobile

keypress not working ios

换keydown试试

然后试了：// $('#inputQuery').bind("keypress", function(e){

// $('#inputQuery').bind("keydown", function(e){

$('#inputQuery').on("keydown", function(e){

移动端 尤其是ios的Safari都不行

ios safari soft keyboard press

ios safari soft keyboard press event

这里也提到了：

iOS和Android中的浏览器，是无法检测到：弹出的键盘中点击了Done或Submit 的

而只能：

而可以想办法检测到：焦点消失

对应着有两种办法：focusout

onblur

不过不是我们要的效果，所以不去管

【总结】

目前结论是：PC端：

Mac

Chrome，Safari：都可以正常检测到keydown，keypress等事件

Chrome模拟iOS，Safari模拟iOS：也可以检测到

移动端：

iOS的Safari：检测不到

Android

普通浏览器：检测不到

Chrome：可以检测到

iOS或Android的微信浏览器：

都检测不到

【后记】

过了1天之后，突然发现：

微信打开网页，内部用的是微信自带浏览器，也支持：

在输入框 输入了内容后 点击 此处的：换行

然后是可以触发搜索了。

-》即内部是可以通过上述代码：// $('#inputQuery').bind("keypress", function(e){

// $('#inputQuery').bind("keydown", function(e){

$('#inputQuery').on("keydown", function(e){

console.log("inputQuery on keydown: e=%o", e)

// // for debug

// $("#submitQuery").text(`on:${e.keyCode}-${e.which}`)

// if(e.which === EnterKeyCode){

if (e.keyCode === EnterKeyCode){

console.log("user pressed done/enter")

ajaxSubmitQuery()

}

})

去捕获到，软键盘中点击了 回车/换行/完成/搜索 等按钮的

对应是完成的键，keyCode是13。

从而可以去出发搜索动作了。

【心得】

微信的浏览器的缓存问题，很是坑爹。

其实昨天代码都对，但是就是页面无法刷新，有缓存，导致有问题。

现在页面更新了，没缓存问题了，就正常显示了。

所以以后如果再去调试代码，记得如果不能及时显示，可能是微信浏览器缓存问题