Выберите весь текст в фокусе, используя jQuery

У меня есть небольшая функция jQuery, предназначенная для автоматического выбора текста в текстовом поле asp.net, когда он получает фокус. Однако текст в текстовом поле выбирается, но сразу же отменяется.

Код работает, если я привязываюсь к событию фокуса с помощью .focus(function()), но я добавляю текстовые поля на страницу динамически, поэтому я думаю, что мне нужно использовать живое событие.

Может ли кто-нибудь увидеть проблему? Указанные текстовые поля находятся в шаблонах элементов из двух gridviews внутри мультивиза, если это имеет значение?

код:

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

Edit:

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

Ответ 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 совместимого кода.

Ответ 2

У меня была аналогичная проблема с формой поиска продукта, над которой я работал. Я знаю, что на это уже был дан ответ, но я полагал, что это не помешает отправить мой код, верно?

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

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

Преимущество состоит в том, что он выбирает текст только тогда, когда форма сначала получает фокус, а не каждый раз, когда нажимается форма, например, когда пользователь хочет выбрать часть текста.

Я переписал скрипку Марселя, чтобы продемонстрировать разницу. http://jsfiddle.net/7tDYq/2/

Ответ 3

Здесь решение, которое я выбрал в вопросе jquery input, выберите все в фокусе:

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