用JavaScript捕获iPhone虚拟键盘中的“完成”按钮点击

l2osamch  于 2023-03-28  发布在  Java
关注(0)|答案(9)|浏览(388)

我想知道是否有一种方法可以使用JavaScript捕获iPhone虚拟键盘的done按钮事件?
基本上,我只是希望能够在用户单击完成时调用JS函数。

iaqfqrcu

iaqfqrcu1#

我无法跟踪单击的“完成”按钮。它没有注册任何click s或keypress es。我必须使用jquerychangefocusoutblur注册addEventListener s(因为项目已经使用jquery)。

ulydmbyx

ulydmbyx2#

你需要这样做:

$('someElem').focusout(function(e) {
    alert("Done key Pressed!!!!")
});

它对我很有效,希望它也能帮助到你。

bn31dyow

bn31dyow3#

在搜索和尝试这个解决方案后,基本上是说:

document.addEventListener('focusout', e => {});

在iPhone 6s上测试

hlswsv35

hlswsv354#

这个问题有点老了,但我最近找到了一个很好的方法来解决这个问题。
“blur”、“focusout”事件的问题是,即使用户只是在输入/文本区域之外点击,并且没有按下“Done”按钮,它们也会触发,在我的情况下,UI应该根据发生的事情而表现不同。
为了实现它,我做了下一件事:
1.显示键盘后(输入接收到焦点),通过addEventListener函数在window上添加click处理程序。当用户单击窗口时,记住变量中的单击时间戳(我们称之为lastClick = Date.now()
1.在blur事件处理程序中,设置10-20 ms的超时以允许其他事件发生。(基本上是Date.now() - lastClick < 50)。如果是,那么就认为是一个“完成”按钮点击,并做相应的逻辑。否则,这是一个常规的“模糊”事件。
这里的关键是,点击键盘控件(包括Done按钮)并不会触发window上的click事件。而让键盘隐藏的唯一其他方法基本上是点击页面的其他元素并使文本区域失去焦点。因此,通过检查事件发生的时间,我们可以估计这是完成按钮点击还是只是模糊事件。

bqf10yzr

bqf10yzr5#

oron tech使用的事件监听器是唯一一个跨平台的解决方案。

document.getElementById("myID").addEventListener("focusout", blurFunction);

 function blurFunction() { // Do whatever you want, such as run another function
const myValue = document.getElementById("myID").value;
myOtherfunction(myValue);
}
h6my8fg2

h6my8fg26#

冒着我的回答不是对问题的回答的风险……我仍然想提出一种替代的思考方式。我们可能误解了“完成”的预期目的。
假设我们的输入是一个搜索输入…
我不认为“完成”的目的是“做搜索”/“去”的行动。
我理解为什么会出现混乱,尤其是当没有向搜索字段提供合适的inputmode时。
🤔 Image: Keyboard WITHOUT inputmode
inputmode="search"添加到您的输入将为您的键盘提供一个非常突出的[ GO ]按钮,我们可以使用它来执行搜索(在本例中)。
💡 Image: Keyboard WITH inputmode
我觉得有了[ GO ]按钮、回车键检测以及可能的键盘外敲击的模糊事件,“完成”作为“折叠键盘”的行为更有意义,减少了(可能消除了)把它看作是我们输入的动作按钮的需要。实际上,“完成”现在变成了本机键盘的关闭按钮(脱离输入),而不是动作按钮,我相信这是作为意图。

esbemjvw

esbemjvw7#

“变”活动效果良好

document.querySelector('your-input').addEventListener('change',e=>
    console.log('Done button was clicked')
);
qmb5sa22

qmb5sa228#

附加一个模糊事件到文本框中。完成触发将触发此事件。

qeeaahzv

qeeaahzv9#

done键和enter键是一样的。所以你可以监听一个按键事件。我用jQuery写这个,我在coffee脚本中使用它,所以我试图在我的脑海中将它转换回js。如果有错误,很抱歉。

$('someElem').bind("keypress", function(e){
   // enter key code is 13
   if(e.which === 13){
     console.log("user pressed done");
    } 
})

相关问题