jQuery - выделить весь текст из текстового поля


130

Как я могу сделать так, чтобы при щелчке внутри текстового поля выделялось все его содержимое?

И в конце концов, когда вы снова нажмете, чтобы отменить его выбор.



5
@Blender: Нет, этот вопрос касается выделения текста в элементе, а не текстовой области. Эти два совершенно разные.
Тим Даун

Ответы:


194

Чтобы пользователь не раздражался, когда весь текст выделяется каждый раз, когда он пытается переместить курсор с помощью мыши, вы должны делать это, используя focusсобытие, а не clickсобытие. Следующее выполнит эту работу и поможет обойти проблему в Chrome, которая препятствует работе простейшей версии (то есть просто вызова select()метода textarea в focusобработчике событий).

jsFiddle: http://jsfiddle.net/NM62A/

Код:

<textarea id="foo">Some text</textarea>

<script type="text/javascript">
    var textBox = document.getElementById("foo");
    textBox.onfocus = function() {
        textBox.select();

        // Work around Chrome's little problem
        textBox.onmouseup = function() {
            // Prevent further mouseup intervention
            textBox.onmouseup = null;
            return false;
        };
    };
</script>

версия jQuery:

$("#foo").focus(function() {
    var $this = $(this);
    $this.select();

    // Work around Chrome's little problem
    $this.mouseup(function() {
        // Prevent further mouseup intervention
        $this.unbind("mouseup");
        return false;
    });
});

10
Я думаю, что лучше реализовать это, используя отдельную кнопку «выбрать весь текст», поскольку автоматический выбор текста в фокусе или событиях щелчка действительно раздражает.
RobG

2
это не удается для меня в Chrome, рабочее решение: stackoverflow.com/a/6201757/126600
zack

@zack: Пример jsFiddle в этом ответе у меня работает в Chrome. Не для тебя? Я согласен, что ответ, на который вы ссылаетесь, более надежен.
Тим Даун

@TimDown: вы правы, я немного усердствовал - на самом деле он работает правильно при нажатии, но не работает, если вы tabпопадаете в текстовое поле - другое ваше решение работает для обоих случаев :)
zack

Немного измените приведенный выше код, и он будет работать как шарм .. $("#foo").mouseup(function() { $("#foo").unbind("mouseup"); return false; }); вам нужно this
указать

14

Лучший способ, с решением проблемы вкладок и хрома и новым способом jquery

$("#element").on("focus keyup", function(e){

        var keycode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
        if(keycode === 9 || !keycode){
            // Hacemos select
            var $this = $(this);
            $this.select();

            // Para Chrome's que da problema
            $this.on("mouseup", function() {
                // Unbindeamos el mouseup
                $this.off("mouseup");
                return false;
            });
        }
    });

11

В итоге я использовал это:

$('.selectAll').toggle(function() {
  $(this).select();
}, function() {
  $(this).unselect();
});

но я не знаю, как проверить, выделен ли текст, поэтому я могу отменить два действия :(
Alex

1
@Alex: На твоем месте я бы не стал слишком много связываться с этим. Пользователи ожидают стандартного поведения от текстовых полей.
Тим Даун

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

@Alex: Ах, да. Возможно, вы захотите сделать его доступным только для чтения, добавив readonlyзатем атрибут.
Тим Даун

1
@Hollister: Нет, пользователь или скрипт вполне могут выбрать контент в div. Вы, вероятно, думаете о копировании в буфер обмена, что невозможно в сценарии без библиотеки на основе Flash, такой как ZeroClipboard.
Тим Даун


5

Чуть короче версия jQuery:

$('your-element').focus(function(e) {
  e.target.select();
  jQuery(e.target).one('mouseup', function(e) {
    e.preventDefault();
  });
});

Он правильно обращается с угловым корпусом Chrome. См. Http://jsfiddle.net/Ztyx/XMkwm/ для примера.


4

Выделение текста в элементе (аналогично выделению мышью)

:)

Используя принятый ответ на этот пост, вы можете вызвать функцию следующим образом:

$(function() {
  $('#textareaId').click(function() {
    SelectText('#textareaId');
  });
});

Может быть, отметка этого вопроса как дубликата может быть более полезной? На самом деле это был не ваш ответ, поэтому было бы лучше объединить два вопроса.
Blender

Согласовано - хотя OP может извлечь выгоду из добавленного объяснения ее реализации. :)
Тодд

Этот вопрос касается выделения текста в элементе, а не в текстовом поле. Эти два совершенно разные.
Тим Даун

спасибо, я узнал, что я могу это сделать $(this).select(), я воспользуюсь этим, потому что это меньше кода :)
Alex
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.