使用 jQuery 选择焦点上的所有文本

Posted 2023-05-08

【中文标题】使用 jQuery 选择焦点上的所有文本

【英文标题】：Select all text on focus using jQuery

【发布时间】：2011-09-01 17:40:17

【问题描述】：

我有一个小的 jQuery 函数，用于在获得焦点时自动选择 asp.net 文本框中的文本。但是，文本框中的文本会被选中，但会立即取消选中。

如果我使用 .focus(function()) 绑定到焦点事件，则代码有效，但我将文本框动态添加到页面，这就是我认为需要使用实时事件的原因。

任何人都可以看到问题吗？有问题的文本框位于多视图内两个网格视图的项目模板中，如果这会有所不同？

代码：

<script type="text/javascript">

    //Select all text in Cost Rate Text Boxes when they have focus
    $(document).ready(function () 
        $(".CostRateTextBox").live('focus', function () 
            $(this).select();
        );

    );

</script>

编辑：

<script type="text/javascript">

    //Select all text in Cost Rate Text Boxes when they have focus
    $(document).ready(function () 
        $(".CostRateTextBox").live('focus', function () 
            $(this).select();
            preventDefault();
        );

    );

</script>

【问题讨论】：

我们可以看到渲染的html作为一个小例子吗？

你需要preventDefault();吗？

@Fourth - 我添加了一张图片作为页面示例。

@WraithNath - 在您的“焦点”功能中的任何位置。下面的答案是类似的，只需将return false; 替换为preventDefault();，因为这涵盖了return false; 没有的众多罪过。

@Lazarus：如果您查看实时的 jQuery 文档，您会看到 list of caveats。其中之一是event.stopPropagation() 将不起作用，而必须使用return false;。

【参考方案1】：

似乎是mouseup 事件干扰。您会注意到，如果您单击并按住表单字段，然后将其移出到“mouseup”，则选择棒。使用mouseup 而不是focus 来触发select() 方法似乎效果很好：

<script type="text/javascript">

    //Select all text in Cost Rate Text Boxes when they have focus
    jQuery(function($)
        $("table.demo").on("mouseup", ".CostRateTextBox", function () 
            $(this).select();
        );
    );

</script>

演示： jsfiddle.net/gableroux/jvJzX/12

有关 jQuery 1.3 - 1.8 兼容代码，请参阅 original demo。

【讨论】：

您好 Marcel - 谢谢，您的解决方案有效，开始时我有点担心，因为这是一个时间表输入页面，用户将使用 Tab 键。幸运的是，选项卡行为已经选择了字段中的文本，所以它只是我需要处理的点击事件:)

@WraithNath：没错，Tab 无论如何都会选择，所以你不需要触发焦点。

刚刚检查了你的 jsfiddle，非常好:)

@AndyE：由于他的屏幕截图中有很多行和列，例如，如果它在对角的表单字段可能更容易单击。

更新了演示，使其适用于最新的 jQuery，也在 textarea 上进行了测试。 jsfiddle.net/gableroux/jvJzX/12

【参考方案2】：

我在处理产品搜索表单时遇到了类似的问题。我知道这已经得到解答，但我认为提交我的代码不会有什么坏处，对吧？

$('#product-search').focus(function()
    $('#product-search').mouseup(function()
        $(this).select(function()
            $(this).off('mouseup');
        );

        $(this).select();
    );
);

优点是它只在表单第一次获得焦点时才选择文本，而不是每次点击表单时都选择文本，例如当用户想要选择文本的一部分时。

我重写了 Marcel 的小提琴以展示差异。 http://jsfiddle.net/7tDYq/2/

【讨论】：

你这个男人！这正是我想要的。

嗯，这不是一个好的解决方案，因为您无法选择文本框的部分区域进行删除或编辑。

【参考方案3】：

这是我在问题jquery input select all on focus中提出的解决方案：

$("input").focus(function()
    $(this).on("click.a keyup.a", function(e)      
        $(this).off("click.a keyup.a").select();
    );
);

$("input").focus(function()
    $(this).on("mouseup.a keyup.a", function(e)      
        $(this).off("mouseup.a keyup.a").select();
    );
);

// event logger
$("input").on("mousedown focus mouseup click blur " + 
              "keydown keypress keyup change",
              function(e) 
     console.log(e.type);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" value="potato" />
<input type="text" value="tomato" />

问题：

这里稍微解释一下：

首先，让我们看一下鼠标或 Tab 进入字段时的事件顺序。 我们可以像这样记录所有相关事件：

$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
              function(e)  console.log(e.type); );

某些浏览器会在mouseup 事件期间尝试定位光标。这是有道理的，因为您可能希望在一个位置开始插入符号并拖动以突出显示某些文本。在您实际抬起鼠标之前，它无法指定插入符号的位置。因此，处理focus 的函数注定会过早响应，让浏览器覆盖您的定位。

但问题是我们确实想要处理焦点事件。它让我们知道有人第一次进入该领域。在那之后，我们不想继续覆盖用户选择行为。

解决方案：

相反，在focus 事件处理程序中，我们可以快速为即将触发的click（单击）和keyup（制表符）事件附加侦听器。

注意：tab事件的keyup实际上是fire in the new input field, not the previous one

我们只想触发一次事件。我们可以使用.one("click keyup)，但这将是call the event handler once for each event type。相反，只要按下 click 或 keyup，我们就会调用我们的函数。我们要做的第一件事是删除两者的处理程序。这样一来，我们是用标签还是鼠标输入都无关紧要。该函数应该只执行一次。

注意：大多数浏览器在tab事件期间自然会选择所有文本，但是作为animatedgif pointed out，我们还是要处理keyup事件，否则click事件仍然会一直徘徊大约在我们加入选项卡的任何时间。我们会同时收听这两种情况，因此我们可以在处理完选择后立即关闭监听器。

现在，我们可以在浏览器做出选择后调用select()，所以我们一定会覆盖默认行为。

最后，为了获得额外的保护，我们可以将event namespaces 添加到click 和keyup 函数中，这样.off() 方法就不会删除任何其他可能正在运行的侦听器。

---

另外，如果你想用function called once that will fire exactly once for any number of events扩展jQuery：

//The handler is executed at most once per element for all event types.
$.fn.once = function (events, callback) 
    return this.each(function () 
        $(this).on(events, myCallback);
        function myCallback(e) 
            $(this).off(events, myCallback);
            callback.call(this, e);
        
    );
;

然后你可以像这样进一步简化代码：

$("input").focus(function()
    $(this).once("click keyup", function(e)      
        $(this).select();
    );
);

//The handler is executed at most once per element for all event types.
$.fn.once = function (events, callback) 
    return this.each(function () 
        $(this).on(events, myCallback);
        function myCallback(e) 
            $(this).off(events, myCallback);
            callback.call(this, e);
        
    );
;

$("input").focus(function()
    $(this).once("click keyup", function(e)      
        $(this).select();
    );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" value="potato" />
<input type="text" value="tomato" />

---

在 IE 10+、FF 28+ 和 Chrome 35+ 中测试

【讨论】：

这是一个很好的答案！

你有什么理由不能做... $(sel).on('focus', function() $(this).select(); ).mouseup (函数(e) e.preventDefault(); ); ??

@NotoriousPet0，这是一个很好的解决方案 (jsFiddle)。我唯一要注意的是，在第一次选择之后，您无法单击并拖动以选择文本的一部分。这不是什么大问题，但它是一种奇怪的 UI 体验。

感谢您指出这一点。但是，我在 Chrome 中，某些文本区域和输入在重新选择文本时没有问题。但是，当您尝试选择文本（并且也不选择文本）时，我的页面上使用完全相同的代码的几个输入会将光标推到框中的任何内容的末尾。我想知道在这些特定情况下变量是什么，导致它们行为不端。您在哪个浏览器中看到这些问题？我现在去检查小提琴。

Err 抱歉，我正在使用一段新代码...将尝试添加到小提琴中。