@Blender: Нет, этот вопрос касается выделения текста в элементе, а не текстовой области. Эти два совершенно разные.
Тим Даун
Ответы:
194
Чтобы пользователь не раздражался, когда весь текст выделяется каждый раз, когда он пытается переместить курсор с помощью мыши, вы должны делать это, используя focusсобытие, а не clickсобытие. Следующее выполнит эту работу и поможет обойти проблему в Chrome, которая препятствует работе простейшей версии (то есть просто вызова select()метода textarea в focusобработчике событий).
<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;returnfalse;};};</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");returnfalse;});});
Я думаю, что лучше реализовать это, используя отдельную кнопку «выбрать весь текст», поскольку автоматический выбор текста в фокусе или событиях щелчка действительно раздражает.
@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 selectvar $this = $(this);
$this.select();// Para Chrome's que da problema
$this.on("mouseup",function(){// Unbindeamos el mouseup
$this.off("mouseup");returnfalse;});}});
но я не знаю, как проверить, выделен ли текст, поэтому я могу отменить два действия :(
Alex
1
@Alex: На твоем месте я бы не стал слишком много связываться с этим. Пользователи ожидают стандартного поведения от текстовых полей.
Тим Даун
нет, это конкретное текстовое поле предназначено только для копирования и вставки. весь текст, который у меня внутри, представляет собой большую зашифрованную строку, которую можно либо полностью заменить, либо скопировать в буфер обмена
Alex
@Alex: Ах, да. Возможно, вы захотите сделать его доступным только для чтения, добавив readonlyзатем атрибут.
Тим Даун
1
@Hollister: Нет, пользователь или скрипт вполне могут выбрать контент в div. Вы, вероятно, думаете о копировании в буфер обмена, что невозможно в сценарии без библиотеки на основе Flash, такой как ZeroClipboard.
Может быть, отметка этого вопроса как дубликата может быть более полезной? На самом деле это был не ваш ответ, поэтому было бы лучше объединить два вопроса.
Blender
Согласовано - хотя OP может извлечь выгоду из добавленного объяснения ее реализации. :)
Тодд
Этот вопрос касается выделения текста в элементе, а не в текстовом поле. Эти два совершенно разные.
Тим Даун
спасибо, я узнал, что я могу это сделать $(this).select(), я воспользуюсь этим, потому что это меньше кода :)
Ответы:
Чтобы пользователь не раздражался, когда весь текст выделяется каждый раз, когда он пытается переместить курсор с помощью мыши, вы должны делать это, используя
focus
событие, а неclick
событие. Следующее выполнит эту работу и поможет обойти проблему в Chrome, которая препятствует работе простейшей версии (то есть просто вызоваselect()
метода textarea вfocus
обработчике событий).jsFiddle: http://jsfiddle.net/NM62A/
Код:
версия jQuery:
источник
tab
попадаете в текстовое поле - другое ваше решение работает для обоих случаев :)$("#foo").mouseup(function() {
$("#foo").unbind("mouseup");
return false;
});
вам нужноthis
Лучший способ, с решением проблемы вкладок и хрома и новым способом jquery
источник
В итоге я использовал это:
источник
readonly
затем атрибут.источник
Чуть короче версия jQuery:
Он правильно обращается с угловым корпусом Chrome. См. Http://jsfiddle.net/Ztyx/XMkwm/ для примера.
источник
Выделение текста в элементе (аналогично выделению мышью)
:)
Используя принятый ответ на этот пост, вы можете вызвать функцию следующим образом:
источник
$(this).select()
, я воспользуюсь этим, потому что это меньше кода :)