Javascript - 检查用户是否正在编辑文本输入答案

【问题标题】：Javascript - check if user is editing text inputJavascript - 检查用户是否正在编辑文本输入
【发布时间】：2024-05-01 21:45:02
【问题描述】：

您能否检查用户是否正在编辑文本字段而不进行任何编辑？我希望当用户在文本字段中并按 Enter 时调用一个函数。我知道它可以与表单一起使用。

咖啡：

$(document).keyup (e) -> 
  func()  if e.which is 13 and "user is in input field"

Javascript：

$(document).keyup(function(e) {
    if(e.which == 13 and "user is in input field") {
        func();
    }
});

【问题讨论】：

"用户在输入字段中" ? JavaScript 中的那个是什么？
这是个问题，哈哈。
你不想在它周围放置一个表格是为了什么目的？
使用图片制作提交按钮比使用必须设置样式的按钮更容易。

标签： javascript function input coffeescript keypress

【解决方案1】：

我会像 Yair Nevet 那样使用焦点状态，因为您可能需要在其他事件回调（如 onbeforeunload）中进行测试。

"user is in a field or something" = $( "input:focus,textarea:focus" ).length > 0

jQuery 文档指出 “如果您正在寻找当前聚焦的元素，$( document.activeElement ) 将检索它而无需搜索整个 DOM 树。”

也许

$( document.activeElement ).filter('input,textarea').length > 0

所以：

$(document).keyup(function(e) {
    if(e.which == 13 and $( document.activeElement ).filter('input,textarea').length > 0) {
        func();
    }
});

jQuery doc

【讨论】：

如果焦点位于任何控件（包括按钮、选择元素等）上，这两个选项都不会返回true吗？
我只是不喜欢关键事件的方法
“我只是不喜欢按键事件方法” - 也许是这样，但是当用户在不使用按键事件的情况下按下回车时，有点难以测试...
我说的是焦点状态检测。该测试可能对其他事件回调有用，例如 onbeforeunload。

【解决方案2】：

您可以使用 jQuery 的 .on() 方法创建一个绑定到 document 的委托事件处理程序，但仅当目标元素与您选择的选择器匹配时才调用您的处理程序函数：

$(document).on('keypress', 'input[type="text"],textarea', function(e) {
    if (e.which === 13) {
        // do something here
    }
});

（这类似于 Musa 的回答，只是 jQuery 会自动为您进行 .is() 测试。）

注意第二个参数中的选择器是'input[type="text"],textarea'，以便排除非文本输入。

【讨论】：

【解决方案3】：

您可以使用目标元素来检查哪个字段处于焦点状态

$(document).keypress(function(e) {
    if(e.which == 13 && $(e.target).is('input,textarea')) {
        func();
    }
});

$(e.target).is('input,textarea') 如果按键事件发起的元素是文本框，则返回 true。

咖啡：

$(document).keypress (e) ->
   func()  if e.which is 13 and $(e.target).is("input,textarea")

【讨论】：

【解决方案4】：

试试这个

$('input').keyup(function(e) {
    if (e.which == 13) {
        // do whatever you want
    }
});

【讨论】：

我认为不是这个问题
@ArmelLarcier ：哦，真的吗？怎么会？
“用户在某个字段中”不能概括为“用户在某个字段中释放了一个键”...焦点在这里有问题还是我弄错了？
@ArmelLarcier - “我希望当用户在文本字段中并按下回车键时调用一个函数。”
是的，它应该只在用户编辑文本字段时调用。（当他点击它时）

【解决方案5】：

我会使用 jQuery 检查中的输入字段是否处于焦点：

var selectedInput = null;
$(function() {
    $('input, textarea, select').focus(function() {
        selectedInput = this;
    }).blur(function(){
        selectedInput = null;
    });
});

【讨论】：