jquery判断获取焦点的是不是输入框

原创

mob64ca12f4d1ad 2023-12-18 10:26:14 ©著作权

文章标签 输入框获取焦点选择器 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f4d1ad的原创作品，请联系作者获取转载授权，否则将追究法律责任

JQuery判断获取焦点的是不是输入框

在前端开发中，我们经常会遇到需要判断当前获取焦点的元素是否是输入框的情况。这在一些表单验证、交互设计等场景中非常常见。本文将介绍使用JQuery判断获取焦点的元素是否是输入框，并提供相应的代码示例。

如何判断获取焦点的是不是输入框

使用JQuery可以方便地获取当前获取焦点的元素，并通过一些方法和属性来判断这个元素是否为输入框。

首先，我们可以使用:focus选择器来获取当前获取焦点的元素。这个选择器能够匹配所有具有焦点的元素。

$(document).on('focus', function() {
    var focusedElement = $(':focus');
    // 判断获取焦点的元素是否是输入框
    if (focusedElement.is('input[type="text"], input[type="password"], textarea')) {
        console.log('获取焦点的元素是输入框');
    } else {
        console.log('获取焦点的元素不是输入框');
    }
});

上述代码中，我们通过$(':focus')获取当前获取焦点的元素，并使用is方法判断这个元素是否是输入框。is方法接受一个选择器表达式作为参数，如果元素匹配选择器，则返回true，否则返回false。

在这里，我们使用了选择器input[type="text"], input[type="password"], textarea来选择输入框元素。这个选择器分别匹配了所有类型为"text"的input元素、类型为"password"的input元素和textarea元素。

如果获取焦点的元素是输入框，将输出"获取焦点的元素是输入框"；否则，将输出"获取焦点的元素不是输入框"。

代码示例

下面是一个完整的代码示例，我们创建了一个包含输入框的表单，并使用JQuery进行判断。

<!DOCTYPE html>
<html>
<head>
    <script src="
    <script>
        $(document).on('focus', function() {
            var focusedElement = $(':focus');
            if (focusedElement.is('input[type="text"], input[type="password"], textarea')) {
                console.log('获取焦点的元素是输入框');
                focusedElement.css('border', '2px solid green');
            } else {
                console.log('获取焦点的元素不是输入框');
            }
        });
    </script>
    <style>
        input, textarea {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <form>
        <input type="text" placeholder="文本输入框"><br>
        <input type="password" placeholder="密码输入框"><br>
        <textarea placeholder="文本域"></textarea><br>
        <button type="button">按钮</button>
    </form>
</body>
</html>

在上述示例中，我们给获取焦点的输入框添加了绿色边框，并通过控制台输出提示信息。