最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

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

搜索 crifan 121浏览 0评论
现在已经实现了一个web网页的输入框,然后点击搜索:
但是现在想要实现:
在手机端,当输入内容时,所弹出的输入法,用户点击 搜索 Done 完成 之类按钮时,能否获取对应事件,触发搜索
即:键盘中 完成键 触发 搜索
希望点击 搜索 可以捕获到,触发搜索
html keyboard done event
Capture “done” button click in iphone’s virtual keyboard with Javascript – Stack Overflow
javascript – Call a function when the ‘done’ button is pressed on the keyboard in Cordova – Stack Overflow
html input keyboard done event
Go vs. return button in iOS keyboard for HTML input forms – Stack Overflow
xcode – PhoneGap IOS Keyboard Done Key Event – Stack Overflow
Keyboard: keydown and keyup
用代码:
    $('#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
javascript – jQuery keypress() event not firing? – Stack Overflow
javascript – jquery bind keypress not working in android tab – Stack Overflow
javascript – jQuery bind on keypress not firing – Stack Overflow
.keypress() not working on the first key pressed – jQuery Forum
jQuery detect ENTER key press event – HowToDoInJava
过了会,Mac中Safari中工作了:
Mac中Safari模拟iOS也是可以的:
https://howtodoinjava.com/scripting/jquery/jquery-detect-if-enter-key-is-pressed/
看到检测,感觉有点怪:
if(keycode == ’13’){
不是数字13,而是字符串13
再去调试:
此处的确是数字13,不是字符串:
数字此处是N,字符串是S
所以现在是PC端浏览器都可以支持keypress
但是移动端浏览器iOS或Android都不支持
继续调试发现:
Android端Chrome浏览器是支持的keypress的:
jquery mobile keypress not working
javascript – jQuery Mobile: Why are onClick and onKeyPress events not working? – Stack Overflow
javascript – keyup, keydown and keypress events not working on mobile – Stack Overflow
keypress event doesn’t work on android phones · Issue #70 · chrisdone/jquery-console
http://demos.jquerymobile.com/1.0a2/experiments/api-viewer/docs/keypress/index.html
Jquery: not working in Mobile’s browser where as working in Windows7’s browser in laptop | The ASP.NET Forums
https://forums.asp.net/t/2121648.aspx?Jquery+not+working+in+Mobile+s+browser+where+as+working+in+Windows7+s+browser+in+laptop
keypress not working mobile
keypress not working ios
JavaScript keypress event not raised on Android browser – Stack Overflow
换keydown试试
javascript – .keyup jquery not working on Iphone – Stack Overflow
然后试了:
// $('#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
javascript – Safari on iOS, is there any event before virtual keyboard pop up? – Stack Overflow
Capture “done” button click in iphone’s virtual keyboard with Javascript – Stack Overflow
android – Is there any javascript event fired when the on-screen keyboard on mobile safari or chrome opens? – Stack Overflow
Annoying iOS Safari input issues with workarounds | Mobiscroll Blog | Design, UI and UX for Successful Products
How to capture the hide keyboard event on iOS using JavaScript – Stack Overflow
xcode – PhoneGap IOS Keyboard Done Key Event – Stack Overflow
这里也提到了:
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。
从而可以去出发搜索动作了。
【心得】
微信的浏览器的缓存问题,很是坑爹。
其实昨天代码都对,但是就是页面无法刷新,有缓存,导致有问题。
现在页面更新了,没缓存问题了,就正常显示了。
所以以后如果再去调试代码,记得如果不能及时显示,可能是微信浏览器缓存问题

转载请注明:在路上 » 【已解决】HTML中如何获取输入框的输入法的搜索或完成按钮的事件

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
84 queries in 0.093 seconds, using 20.74MB memory