jQuery select()事件：检测文本选中动作-代码号

select() 是一个比较特殊的事件方法，它专门用于检测用户在文本输入框或文本域中选中文字的动作。注意这里的“select”不是下拉选择框 <select>，而是指用鼠标拖拽选中一段文字的操作。

这个事件的作用范围比较窄，只对 <input type="text"> 和 <textarea> 有效。当用户在输入框里按下鼠标拖动选中了一部分文字时，select 事件就被触发。在一些需要提示用户复制、或者想展示选中文字内容的应用场景里，这个方很实用。

语法形式

触发 select 事件：

$(selector).select()

程序化地触发选中事件，同时执行已绑定的处理函数。项目开发中这种用法比较少见。

绑定 select 事件：

$(selector).select(function(){
    // 用户选中文字时执行的代码
})

给文本输入框绑定选中文字时的回调函数，这是 select() 的主要使用方式。

基础示例：检测文字选中并提示

下面这个例子演示了 select() 的绑定用法。页面上有两个文本输入框，当用户在任意一个框里选中文字时，下方会显示提示信息，2 秒后自动消失。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>select() 基础示例</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <style>
        .guide-text {
            color: #c0392b;
            margin-bottom: 8px;
        }
        .feedback {
            color: #2471a3;
            font-weight: bold;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <p class="guide-text">在下方输入框中用鼠标拖选文字试试：</p>
    <input type="text" id="siteInput1" value="学习 jQuery 编程"><br><br>
    <input type="text" id="siteInput2" value="前端开发教程">
    <div class="feedback" id="msgArea"></div>

    <script>
        $(":input").select(function(){
            $("#msgArea").text("检测到文字被选中").show().fadeOut(2000);
        });
    </script>
</body>
</html>

在第一个输入框里用鼠标拖选“jQuery”这几个字，下方的提示文字立刻出现，2 秒后渐隐。用 :input 选择器可以一次性选中所有输入框，不管是 text 还是 password 类型都会包含在内。这种提示反馈在需要引导用户复制内容的功能里比较常见。

select 事件的实用场景

虽然 select() 不像 click 或 focus 那么频繁使用，但在特定场景下它确实比其他方式更直接：

一键复制提示： 用户选中文字后弹出“按 Ctrl+C 复制”的提示条，引导操作。

显示选中内容统计： 在文本编辑器中，用户选中一段文字后实时显示选中了多少个字符。配合 window.getSelection() 可以拿到选中的具体内容。

输入框联动： 比如两个输入框，用户在一个框里选中某个关键词后，另一个框自动显示对应的翻译或说明。

有个细节需要留意：select 事件的触发时机是鼠标松开的那一刻，不是按下的瞬间。如果用户拖选了一半还没松手，事件不会触发。这个行为跟 mousedown 和 mouseup 的配合有关系，理解这一点对调试选中相关的交互逻辑有帮助。

select 和 focus 选中内容的配合

有一个常用组合是在输入框获得焦点时自动全选内容，方便用户直接覆盖输入。这个效果用 focus() 配合原生的 select() 方法（注意这里是 DOM 方法，不是 jQuery 事件）就能实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>focus 自动全选示例</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <p>点击输入框会自动全选内容，方便直接替换：</p>
    <input type="text" id="autoSelectInput" value="选中我然后直接输入新内容" style="width:280px;padding:6px;">

    <script>
        $("#autoSelectInput").focus(function(){
            this.select(); // 调用原生 DOM 的 select() 方法全选文字
        });
    </script>
</body>
</html>

点击输入框，文字立即被全选，直接打字就能覆盖原有内容。这个交互在搜索框、网址栏、参数配置等场景里很常见。注意这里 this.select() 是原生 JavaScript 的 DOM 方法，和 jQuery 的 select() 事件是不同的东西——原生方法执行全选操作，jQuery 事件方法用于绑定选中文字时的回调。两个同名但作用不同，别搞混。

本节课程知识要点

select() 事件在用户在文本输入框或文本域中选中文字时触发，作用范围限于 <input type="text"> 和 <textarea>。
触发时机是鼠标松开完成选中的那一刻，拖选过程中不会触发。
可用于实现“检测选中并提示复制”、“显示选中字数统计”等辅助功能。
jQuery 的 select() 事件方法和原生 DOM 的 select() 方法是两回事：前者绑定选中回调，后者执行全选操作。
配合 focus() 和原生 select() 可实现“获得焦点自动全选”的常见交互模式。

select() 是一个比较专用的事件方法，和表单交互的其他几个事件（focus、blur、change）相比使用频率没那么高，但在需要感知用户选中文字行为的场景里它有着不可替代的作用。理解它的触发条件和适用边界，配合焦点事件和原生 DOM 方法一起使用，能写出更细腻的输入框交互体验。

本文标签：

jQuery select()事件：检测文本选中动作

语法形式

基础示例：检测文字选中并提示

select 事件的实用场景

select 和 focus 选中内容的配合

本节课程知识要点

感谢您的认可和支持