使用 JavaScript 捕获 iPhone 虚拟键盘中的“完成”按钮单击答案

【问题标题】：Capture "done" button click in iPhone's virtual keyboard with JavaScript使用 JavaScript 捕获 iPhone 虚拟键盘中的“完成”按钮单击
【发布时间】：2011-06-25 15:46:59
【问题描述】：

我想知道是否有一种方法可以使用 JavaScript 来捕获 iPhone 的虚拟键盘的完成按钮事件？

基本上，我只是希望能够在用户点击完成时调用一个 JS 函数。

【问题讨论】：

我正在寻找一种方法来做到这一点。感谢您的问题和答案。

标签： javascript ios dom-events

【解决方案1】：

这个问题有点老了，但我最近找到了一种解决方法。

'blur'、'focusout' 事件的问题在于，即使用户只是在输入/文本区域之外点击，并且没有按下“完成”按钮，它们也会触发，在我的情况下，UI 的行为应该有所不同，具体取决于到底发生了什么。

所以为了实现它，我做了接下来的事情：

显示键盘后（输入获得焦点），通过addEventListener 函数在window 上添加click 处理程序。当用户点击窗口时，记住变量中点击的时间戳（我们称之为lastClick = Date.now()）
在blur 事件处理程序中，将超时设置为10-20 毫秒以允许其他事件发生。然后，在超时后，检查blur 事件发生的时间差是否比lastClick（基本上是Date.now() - lastClick < 50）低50-100 毫秒。如果是，则将其视为“完成”按钮单击并执行相应的逻辑。否则，这是一个常规的“模糊”事件。

这里的关键是，点击键盘控件（包括完成按钮）不会触发window 上的click 事件。使键盘隐藏的唯一其他方法基本上是点击页面的其他元素并使文本区域失去焦点。因此，通过检查事件发生的时间，我们可以估计这是完成按钮单击还是只是模糊事件。

【讨论】：

当您在页面外点击时，blur 事件也会被触发。

【解决方案2】：

“更改”事件工作正常

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

【讨论】：

是的，但这也会在用户输入每个字符时触发，而不仅仅是在他们完成输入时触发

【解决方案3】：

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);
}

【讨论】：

【解决方案4】：

搜索并尝试后this solution 基本上是说：

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

在 iPhone 6s 上测试

【讨论】：

但是你有没有在其他地方测试过它？

【解决方案5】：

我无法跟踪被点击的“完成”按钮。它没有注册任何clicks 或keypresses。我必须使用jquery 为change、focusout 和blur 使用addEventListeners（因为该项目已经在使用jquery）。

【讨论】：

【解决方案6】：

你需要做一些这样的事情：

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

它对我有用，希望它也能帮助你。

【讨论】：

这适用于我在反应中使用它。 document.addEventListener('focusout', this.onFocusOut);
如果你在输入之外点击，至少在android上会触发focusout

【解决方案7】：

完成键与回车键相同。所以你可以听一个按键事件。我正在使用 jQuery 编写这个并且我在咖啡脚本中使用它，所以我试图将它转换回我脑海中的 js。如有错误请见谅。

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

【讨论】：

我已经检查了您的方法，但它不适用于 textarea。
完成按钮和回车不一样。 “Go”按钮相当于“Enter”/键码 13。
我已经在移动 safari 上尝试了你的 jsfiddle，当你按下“完成”时它不会触发警报。我也尝试自己实现它并改进你的 jsfiddle。我认为您只是将顶部的蓝色“完成”与底部的“开始”或“返回”混淆了。
keypress code 13 用于返回或回车键。如您所见，我的答案发布于 2013 年。如果 safari 自 2013 年以来更改了 ios 软件键盘的返回/输入/返回键，则它不再起作用。请记住代码随时间的变化。听小提琴中的按键事件以及当您按下所需键时触发的任何代码，这就是您使用的。我不再做 JS，所以 keypress 事件可能仍然无法使用。现在是 2016 年
@AlexReynolds 更新您的答案不会有什么坏处，因为它已经过时了。它目前被选为正确答案。由于 SO 力求成为规范，因此指出这一点很有价值。

【解决方案8】：

将模糊事件附加到相关文本框。 done fire 将触发此事件。

【讨论】：

您的想法远非理想的解决方案。问题是表单控件上的模糊事件可以通过许多其他方式触发，而不仅仅是通过点击完成，例如点击页面上的其他位置或相邻控件。
为什么这个答案有赞成票？它甚至与问题无关，实际上是一个不恰当的答案