Question

我有一个小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>

enter image description here

编辑：

<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>

Answer 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。

Answer 2

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

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

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

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

我重写了马塞尔的小提琴来展示其中的差异。 http://jsfiddle.net/7tDYq/2/

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

＆＃13;

$("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);
});

＆＃13;

<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" />

＆＃13;

问题：

这里有一点解释：

首先，让我们看看鼠标或标签到字段时的事件顺序我们可以记录所有相关事件：

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

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

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

解决方案：

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

注意：标签事件的主要内容实际上是fire in the new input field, not the previous one

我们只想发起一次事件。我们可以使用.one("click keyup)，但这会call the event handler once for each event type。相反，只要按下点击或键盘，我们就会调用我们的功能。我们要做的第一件事就是删除两者的处理程序。这样，无论我们是选项卡还是鼠标都不重要。该功能应该只执行一次。

注意：大多数浏览器会在标签事件期间自然选择所有文字，但是animatedgif pointed out，我们仍然希望处理keyup事件，否则{{1}在我们选中的任何时候，事件仍会挥之不去。我们听取两者的意见，这样我们就可以在我们处理完选择后立即关闭听众。

现在，我们可以在浏览器进行选择后调用click，以便我们确保覆盖默认行为。

最后，为了获得额外保护，我们可以将event namespaces添加到select()和click函数中，以便keyup方法不会移除任何其他可能的侦听器在比赛中。

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

.off()

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

在IE 10 +，FF 28+和＆amp ;;中测试Chrome 35 +

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

3 个答案:

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

问题：

解决方案：