使用jQuery选择所有焦点文字

问题描述

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

    

解决方法

似乎是“ 2”事件的干扰。您会注意到，如果您单击并按住表单字段，然后将其移到选择条的“

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兼容代码。     ,我正在使用的产品搜索表单存在类似的问题。我知道已经解决了这个问题，但是我认为提交我的代码不会对吧？

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

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

优点在于，它仅在表单第一次获得焦点时才选择文本，而不是在每次单击表单时（例如，当用户想要选择文本的一部分时）都选择文本。 我改写了马塞尔的小提琴，以证明两者之间的区别。 http://jsfiddle.net/7tDYq/2/     ,这是我在问题jquery输入中全神贯注选择的解决方案：

$(\"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\" />