¿Cómo manipular la selección de texto de un input field en YouTube?

Question

Uso un Userscript para cambiar ciertas funcionalidades de YouTube y estoy intentando bloquear el "select all" en el text field del enlace para compartir, allí donde pone la dirección del vídeo:

^{el motivo es que no necesito el https:// y hago ese copiar/pegar a menudo}

El text field solo aparece en el DOM después de pinchar al botón Share. He conseguido quitar la propiedad focus con el script abajo, pero el "select all" sigue activo:

// Botón "Share"
$('button[data-trigger-for="action-panel-share"]').on('click', function() {      
    window.setTimeout (function(){ 
        // Input field con la URL - no hay onclick, pero por si acaso
        $("input[name=share_url]").prop('onclick',null).prop('focus',null); 
    },300);
});

He intentado buscar por share_url en el Depurador JavaScript de Firefox pero no he encontrado la propiedad que tengo que quitar para conseguir el comportamiento deseado...

Cómo solución alternativa, acabo de intentar sustituir el contenido del input, pero automáticamente vuelve a su valor original (!!!).

var nueva_url = $("input[name=share_url]").val();
nueva_url = nueva_url.replace('https://','');
$("input[name=share_url]").val(nueva_url);

PS: La página de YT no viene con jQuery por defecto, pero para hacer pruebas es posible inyectarlo a través de la consola usando el siguiente script:

var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = "//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
head.appendChild(script);

Por lo que entiendo, el objetivo es obtener el la URL sin el prefijo de `https://` ¿te funcionaría un script que te devuelva el texto en consola? creo yo que es lo más eficaz y eficiente. — Chofoteddy, Dec 04 '15 at 22:54
Si, el objetivo es copiar fácilmente la URL sin el prefijo, pero la solución alternativa más fácil me parece hacer un `window.prompt`. La solución en la consola implica `ctrl+shift+i`, seleccionar y copiar, cuando lo ideal es simplemente el click en "share" y copiar el texto que ya viene seleccionado. — brasofilo, Dec 05 '15 at 14:24
Si lo que quieres es copiar la URL, ¿por qué no añadir esa funcionalidad directamente al botón de compartir? No quiero sonar crítico, pero parece que estás reinventando la rueda cuando podrías hacerlo de una manera aún más sencilla si aplicases un enfoque diferente. De esta manera, necesitas 4 clicks para copiar la URL (1 en Share, 2 en la caja de texto, 3 el secundario para el menu, 4 seleccionar la opción de copiar). Pero podrías automatizarlo (por ejemplo [basándose en esta otra pregunta](http://es.stackoverflow.com/questions/621)) y hacerlo en un solo click. — Alvaro Montoro, Dec 08 '15 at 15:08

score 6 · Answer 1 · edited Dec 03 '15 at 17:19

6

Puedes contrarrestarlo con un off.

$(document).ready(function() {
  $("input:text").focus(function() {
    $(this).select();
  });
  $("#unbinder").click(function() {
    $("input:text").off();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="hola mundo!" />
<button id="unbinder">click para quitar el select all</button>

edited Dec 03 '15 at 17:19

brasofilo

335
4
20

answered Dec 03 '15 at 16:24

Ruslan López

10,060
11
35
68

No ha funcionado allí en YouTube... :/ Creo que el problema es descubrir qué usa YT para gestionar ese comportamiento... – brasofilo Dec 03 '15 at 16:31
Tengo bloqueado el youtube, pero pienso que el evento no está en el input propiamente. – Ruslan López Dec 03 '15 at 16:35
Parece que lo que usa YT es mucho más poderoso que jQuery o.O He actualizado la pregunta con un test que acabo de hacer y hay algún Listener actuando allí que no deja ni cambiar el valor del `input`... – brasofilo Dec 03 '15 at 17:54
revisaste si tiene requirejs? Esos son los únicos componentes que he visto que al cambiarles su valor vuelven al original – Ruslan López Dec 03 '15 at 18:01
no lo veo, pero los `.js` parecen bien *obfuscated*... – brasofilo Dec 03 '15 at 18:13

score 4 · Accepted Answer · edited Apr 13 '17 at 13:00

Nota: Sé que esta respuesta no se corresponde de manera directa a tu pregunta, pero sí es una alternativa que logra el objetivo deseado especificado en los comentarios: "cómo copiar una versión modificada de la URL de la caja de texto".

Podrías automatizar ese proceso sin necesidad de preocuparte por los eventos de la caja de texto que contiene la URL (e incluso sin preocuparte por el campo porque la URL corta también se puede encontrar en una etiqueta link con rel="shortlink").

Aparte de la opción de usar un prompt que mencionas en el comentario, también podrías utilizar la API del portapapeles (clipboard) de JavaScript si usas un navegador moderno (Chrome 42+, IE10+, Firefox 41+, Opera 29+, pero no Safari) cómo se especifica en esta otra pregunta.

El código en jQuery sería sencillo:

$("button[data-trigger-for='action-panel-share']").on("click", function() { 
    var $temp = $("<input>")
    $("body").append($temp);
    $temp.val($("link[rel='shortlink']").attr("href").replace("https://", "")).select();
    document.execCommand("copy");
    $temp.remove();
});

O alternativamente sin jQuery:

var s = document.querySelector("button[data-trigger-for='action-panel-share']");
s.onclick = function() { 
   var aux = document.createElement("input");
   aux.setAttribute("value", document.querySelector("link[rel='shortlink']").href.replace("https://", ""));
   document.body.appendChild(aux);
   aux.select();
   document.execCommand("copy");
   document.body.removeChild(aux);
}

Ahora, ya no tienes que preocuparte por los diferentes eventos asociados a la caja de texto, y consigues el mismo objetivo con solo un click.

Genial la solución, creo que había caído en un Problema XY cómo bien apuntaste en tu comentario a la pregunta. — brasofilo, Dec 08 '15 at 18:54

¿Cómo manipular la selección de texto de un input field en YouTube?

2 Answers2