В поисках лучшего обходного пути к Chrome выберите ошибку фокусировки

Question

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

Я пытаюсь выделить весь текст в текстовой области, когда он получает фокус. Следующий код jQuery работает в IE / FF / Opera:

$('#out').focus(function(){
  $('#out').select();
});

Однако в Chrome / Safari текст выделяется - очень кратко - но затем вызывается событие mouseUp и текст отменяется. В вышеупомянутых ссылках предлагается следующий обходной путь:

$('#out').mouseup(function(e){
  e.preventDefault();
});

Однако, этот обходной путь мне не подходит . Я хочу выделить весь текст только , когда пользователь выделяет текстовую область. Он должен , тогда сможет выбрать только часть текста, если он выберет. Может кто-нибудь придумать обходной путь, который все еще отвечает этому требованию?

Answer 1

Как насчет этого?

$('#out').focus(function () {
    $('#out').select().mouseup(function (e) {
        e.preventDefault();
        $(this).unbind("mouseup");
    });
});

Answer 2

Принятый ответ (и в основном любое другое решение, которое я нашел до сих пор) не работает с фокусировкой клавиатуры, т.е. е. нажав Tab, по крайней мере, не в моем Chromium 21. Вместо этого я использую следующий фрагмент:

$('#out').focus(function () {
  $(this).select().one('mouseup', function (e) {
    $(this).off('keyup');
    e.preventDefault();
  }).one('keyup', function () {
    $(this).select().off('mouseup');
  });
});

e.preventDefault() в обработчике keyup или focus не помогает, поэтому отмена выбора после фокусировки клавиатуры, по-видимому, происходит не в их обработчиках по умолчанию, а скорее где-то между событиями focus и keyup.

Как предполагает @BarelyFitz, может быть, лучше работать с событиями в пространстве имен, чтобы случайно не отсоединить другие обработчики событий. Для этого замените 'keyup' на 'keyup.selectText' и 'mouseup' на 'mouseup.selectText'.

Answer 3

Почему бы просто:

$('#out').focus(function(){
    $(this).one('mouseup', function() {
        $(this).select();
    });
});

Кажется, работает во всех основных браузерах ...

Answer 4

Очень немного другой подход - отделить событие фокуса от последовательности мыши. Это работает очень хорошо для меня - без переменных состояния, без утечек обработчиков, без случайного удаления обработчиков, и это работает с щелчком, вкладкой или программным фокусом. Код и jsFiddle ниже -

$('#out').focus(function() {
    $(this).select();
});
$('#out').on('mousedown.selectOnFocus', function() {
    if (!($(this).is(':focus'))) {
        $(this).focus();
        $(this).one('mouseup.selectOnFocus', function(up) {
            up.preventDefault();
        });
    }
});

https://jsfiddle.net/tpankake/eob9eb26/27/

Answer 5

Выберите текст, прежде чем ставить фокус на поле ввода.

$('#out').select().focus();

Answer 6

Сделать bool.Установите его на true после события фокуса и сбросьте его после события мыши.Во время наведения мыши вверх, если оно равно true, вы знаете, что пользователь только что выделил текстовое поле;поэтому вы знаете, что вы должны предотвратить появление мыши.В противном случае вы должны позволить этому пройти.

var textFieldGotFocus = false;

$('#out').focus(function()
{
    $('#out').select();
    textFieldGotFocus = true;
});

$('#out').mouseup(function(e)
{
    if (textFieldGotFocus)
        e.preventDefault();
});

$(document).mouseup(function() { textFieldGotFocus = false; });

Важно, чтобы вы поместили слушатель mouseup, который сбрасывает переменную на document, так как не гарантируется, что пользователь отпустит кнопку мыши над текстовым полем..

Answer 7

onclick="var self = this;setTimeout(function() {self.select();}, 0);"

Answer 8

Решение digitalfresh в основном присутствует, но есть ошибка в том, что если вы вручную запускаете .focus () с помощью JS (поэтому не используете щелчок мышью), или если вы переключаетесь на поле, вы получаете привязку к нежелательному событию mouseup -это приводит к тому, что первый щелчок, который должен отменить выбор текста, должен игнорироваться.

Чтобы решить:

var out = $('#out');
var mouseCurrentlyDown = false;

out.focus(function () {
  out.select();

  if (mouseCurrentlyDown) {
    out.one('mouseup', function (e) {
      e.preventDefault();
    });  
  }
}).mousedown(function() {
  mouseCurrentlyDown = true;
});

$('body').mouseup(function() {
  mouseCurrentlyDown = false;
});

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