Bit.ly comparte la funcionalidad del cuadro de texto

¿Alguien tiene idea de cómo bit.ly está reemplazando el área de texto tan pronto como termine de escribir el enlace?

preguntado el 27 de agosto de 11 a las 19:08

¿Qué quieres decir? No se reemplaza, ¿verdad? -

1 Respuestas

Creo que el OP está preguntando cómo bit.ly convierte la URL larga en una URL más corta sin volver a cargar la página. Esto se haría con una llamada AJAX a una página web, que tiene un script ejecutándose.

Aquí está mi intento de obtener un efecto similar en el envío de un formulario, no sé qué aspecto es lo que más le interesa.

<script type="text/javascript">
document.getElementById('formElement').onsubmit = "return requestURL();";
function requestURL() {
    var data = document.getElementById('formInputData').value; // get value from <input type="text" id="formInputData />
    if (window.XMLHttpRequest) {
        var request=new XMLHttpRequest(); // code for IE7+, Firefox, Chrome, Opera, Safari
    }
    else {
        var request=new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5
    }
    request.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        // if the request worked, output the data the server returned (PHP, .net, etc.)
        document.getElementById('serveroutput').innerHTML = result.responseText;
    }
    request.open("GET", "serverscript.ext?data="+data, "true"); // Setup the server request
    request.send(); // Send the request to the server
    return false; // Stops the form from submitting normally
}
</script>

Este ejemplo no tiene seguridad, estilo u otras cosas especiales, pero podría dar una mejor idea.
Es probable que se usen JSON o métodos similares para devolver los datos a JavaScript, que luego diseña y muestra los datos. No puedo dar detalles de lo que usa bit.ly, pero esta es la idea que usaría si probara una solución de JavaScript similar.

¿Cómo respondí la pregunta? ¿Respondí algo completamente diferente? ¿Debería ampliar la respuesta? ¿Hago demasiadas preguntas? (Sí a la última pregunta)


En respuesta a un comentario al presionar la barra espaciadora, esa funcionalidad se puede agregar al código anterior con la siguiente función.

<script type="text/javascript">
    document.getElementById('formInputData').onkeypress = function() {
        if(document.getElementById('formInputData').value.split('')[-1] === " ") {
            document.getElementById('formInputData').value = document.getElementById('formInputData').value.substring(0, str.length - 1);
            requestURL();
        }
    }
</script>

Respondido 29 ago 11, 21:08

Eso es más o menos lo que estaba preguntando, como cómo bit.ly convierte la URL larga en una URL más corta mientras el usuario escribe. - Dondeisccguys

Técnicamente no es como el usuario está escribiendo, la URL se convierte después de que el usuario envía el formulario. Si respondí a su pregunta, puede marcar la pregunta como respondida para que otros sepan que se ha resuelto. - Ryan Leonard

no, la forma en que bit.ly lo tiene es cuando el usuario termina de escribir un sitio, cambia automáticamente la URL larga a la URL corta (sin enviar el formulario), supongo que tu respuesta no es realmente lo que estoy buscando. por ejemplo: mientras escribo "hola, este es mi twitter www.twitter.com/myTwitter ¡ven a ver mis tweets!" Tan pronto como termino de escribir "myTwitter" y presiono la barra espaciadora, esa url larga se cambia a url corta. Supongo que bit.ly verifica cada palabra cuando el usuario presiona la barra espaciadora. - Dondeisccguys

¿Estás hablando de algo en Twitter? En mi computadora, el sitio bitly.com no responde a un espacio, necesito presionar el botón "acortar". Actualizaré mi respuesta para mostrar cómo responder a un espacio. - Ryan Leonard

lo siento, debí haberlo aclarado. Sí, lo que quise decir fue compartir tu estado en las redes sociales que has agregado a través de bit.ly. (por lo que si ha agregado Facebook y Twitter, puede publicar a través de bit.ly). Entonces, cuando escribe su mensaje, automáticamente convierte su URL larga en URL corta. - Dondeisccguys

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.