Selecciona todo el texto en foco usando jQuery

asp.net

Question

Tengo una pequeña función jQuery que está destinada a seleccionar automáticamente el texto en un cuadro de texto asp.net cuando se enfoca. Sin embargo, el texto en el cuadro de texto se selecciona, pero inmediatamente se deselecciona.

El código funciona si me vinculo al evento de enfoque con .focus (function ()) pero estoy agregando los cuadros de texto a la página dinámicamente, por lo que creo que necesito usar el evento en vivo.

¿Alguien puede ver un problema? ¿Los cuadros de texto en cuestión están en las plantillas de elementos de dos vistas de cuadrícula dentro de una vista múltiple si eso hace una diferencia?

Código:

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

Editar:

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

Answer 1

Aquí está la solución que se me ocurrió en la pregunta jQuery entrada seleccionar todo en foco :

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

El problema:

Aquí hay un poco de explicación:

Primero, echemos un vistazo al orden de los eventos cuando hace clic con el mouse o la pestaña en un campo.
Podemos registrar todos los eventos relevantes como este:

$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
function(e) { console.log(e.type); });

Algunos navegadores intentan posicionar el cursor durante el evento mouseup . Esto tiene sentido ya que es posible que desee iniciar el cursor en una posición y arrastrar para resaltar un texto. No puede hacer una designación acerca de la posición del cursor hasta que haya levantado el mouse. Por lo tanto, las funciones que manejan el focus están predestinadas a responder demasiado pronto, dejando que el navegador anule su posición.

Pero el problema es que realmente queremos manejar el evento de enfoque. Nos permite saber la primera vez que alguien ha entrado en el campo. Después de ese punto, no queremos continuar anulando el comportamiento de selección del usuario.

La solución:

En cambio, dentro del controlador de eventos de focus , podemos adjuntar rápidamente escuchas para los eventos de click (clic en) y keyup (pestaña) que están a punto de keyup .

Nota : la combinación de teclas de un evento de pestaña realmente se activará en el nuevo campo de entrada, no en el anterior.

Solo queremos disparar el evento una vez. Podríamos usar .one("click keyup) , pero esto llamaría al controlador de eventos una vez para cada tipo de evento . En lugar de ello, en cuanto presionemos el botón o la tecla keyup, llamaremos a nuestra función. Lo primero que haremos, es eliminar los manejadores de ambos. De esa manera, no importará si estamos o no en una pestaña. La función debe ejecutarse exactamente una vez.

Nota : la mayoría de los navegadores, naturalmente, seleccionan todo el texto durante un evento de tabulación, pero como lo keyup animatedgif , todavía queremos manejar el evento de keyup , de lo contrario, el evento de click seguirá existiendo en cualquier momento que tengamos pestañas. puede apagar los oyentes tan pronto como hayamos procesado la selección.

Ahora, podemos llamar a select() después de que el navegador haya realizado su selección, por lo que estamos seguros de anular el comportamiento predeterminado.

Finalmente, para una protección adicional, podemos agregar espacios de nombres de eventos a las funciones de click y keyup para que el método .off() no elimine ningún otro oyente que pueda estar en juego.

Además , si desea extender jQuery con una función llamada once activará exactamente una vez para cualquier número de eventos :

//The handler is executed at most once per element for all event types.
$.fn.once = function (events, callback) {
return this.each(function () {
$(this).on(events, myCallback);
function myCallback(e) {
$(this).off(events, myCallback);
callback.call(this, e);
}
});
};

Entonces puedes simplificar el código de esta manera:

$("input").focus(function(){
$(this).once("click keyup", function(e){
$(this).select();
});
});

//The handler is executed at most once per element for all event types.
$.fn.once = function (events, callback) {
return this.each(function () {
$(this).on(events, myCallback);
function myCallback(e) {
$(this).off(events, myCallback);
callback.call(this, e);
}
});
};
$("input").focus(function(){
$(this).once("click keyup", function(e){
$(this).select();
});
});

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

Probado en IE 10+, FF 28+ y Chrome 35+

Answer 2

Parece ser el evento mouseup que interfiere. Notará que si hace clic y mantiene presionado en el campo de formulario y luego se mueve fuera de él para hacer mouseup el mouseup los mouseup selección. El uso de mouseup lugar del focus para activar el método select() parece funcionar bien:

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

Demostración: jsfiddle.net/gableroux/jvJzX/12

Consulte la demostración original de jQuery 1.3 - 1.8 código compatible.

Answer 3

Tuve un problema similar con un formulario de búsqueda de producto en el que estaba trabajando. Sé que esto ya se ha respondido, pero me di cuenta de que no está mal enviar mi código, ¿verdad?

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

La ventaja es que solo selecciona el texto cuando el formulario se enfoca por primera vez, en lugar de cada vez que se hace clic en el formulario, como cuando un usuario desea seleccionar una parte del texto.

Reescribí el violín de Marcel para demostrar la diferencia. http://jsfiddle.net/7tDYq/2/