habilitar - instalar javascript

Buscando una mejor solución para Chrome seleccione el error de enfoque

Question

Tengo el mismo problema que el usuario en esta pregunta , que se debe a este error en Webkit. Sin embargo, la solución provista no funcionará para mi aplicación. Permítame volver a plantear el problema para que no tenga que leer otra pregunta:

Intento seleccionar todo el texto en un área de texto cuando se enfoca. El siguiente código jQuery funciona en IE / FF / Opera:

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

Sin embargo, en Chrome / Safari, el texto se selecciona, muy brevemente, pero luego se activa el evento mouseUp y el texto se deselecciona. La siguiente solución alternativa se ofrece en los enlaces anteriores:

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

Sin embargo, esta solución no es buena para mí . Quiero seleccionar todo el texto solo cuando el usuario le da el foco de texto. Luego debe poder seleccionar solo una parte del texto si lo desea. ¿Alguien puede pensar en una solución alternativa que aún cumpla con este requisito?

Answer 1

¿Por qué no simplemente?

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

Parece que funciona en todos los principales navegadores ...

Answer 2

¿Qué tal esto?

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

Answer 3

Haz un bool . Establézcalo en true después de un evento de enfoque y reinícielo después de un evento de mouse arriba. Durante el mouse arriba, si es true , usted sabe que el usuario acaba de seleccionar el campo de texto; por lo tanto, usted sabe que debe evitar que suceda el mouse. De lo contrario, debes dejarlo pasar.

var textFieldGotFocus = false;

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

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

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

Es importante que coloque el detector de mouseup que restablece la variable en el document , ya que no se garantiza que el usuario suelte el botón del mouse sobre el campo de texto.

Answer 4

La respuesta aceptada (y básicamente cualquier otra solución que encontré hasta ahora) no funciona con el foco del teclado, es decir, al presionar la pestaña, al menos no en mi Chromium 21. En su lugar, utilizo el siguiente fragmento:

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

e.preventDefault() en el keyup o en el controlador de focus no ayuda, por lo que la eliminación después de un enfoque de teclado parece no ocurrir en sus controladores predeterminados, sino más bien en algún lugar entre los eventos de focus y de keyup .

Según lo sugerido por @BarelyFitz, podría ser mejor trabajar con eventos de espacio de nombres para no desvincular accidentalmente a otros manejadores de eventos. Reemplace ''keyup'' con ''keyup.selectText'' y ''mouseup'' con ''mouseup.selectText'' para eso.

Answer 5

La solución de digitalfresh está principalmente allí, pero tiene un error en que si activa manualmente .focus () usando JS (por lo que no usa un clic), o si selecciona el campo, obtendrá un evento de mouseup no deseado enlazado; esto causa la primer clic que debería anular la selección del texto que se ignorará.

Resolver:

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;
});

Nota: El evento mouseup debe estar en el cuerpo y no en la entrada, ya que queremos dar cuenta de que el usuario está haciendo mousedown dentro de la entrada, moviendo el mouse fuera de la entrada y luego haciendo mouseup.

Answer 6

Seleccione el texto antes de enfocar el cuadro de entrada.

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

Answer 7

Un enfoque muy diferente sería separar el evento de enfoque de la secuencia del mouse. Esto funciona muy bien para mí, sin variables de estado, sin controladores filtrados, sin eliminación inadvertida de controladores, y funciona con clic, pestaña o enfoque programático. Código y jsFiddle a continuación -

$(''#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 8

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