Bit.ly共享文本框功能

Question

有没有人知道一旦你输入完链接，bit.ly是如何替换文本区的？

Answer 1

我认为OP是在问bit.ly如何在不重新加载页面的情况下将长网址转换为短网址。这将通过对网页的AJAX调用来完成，该网页上运行有一个脚本。

这是我在表单提交上获得类似效果的尝试，我不知道你最感兴趣的方面是什么。

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

此示例没有安全性、样式或其他特殊内容，但可能会提供更好的想法。

可能使用JSON或类似的方法将数据返回给JavaScript，然后JSON设置数据样式并显示数据。我不能给出bit.ly使用什么的细节，但如果我尝试类似的JavaScript解决方案，我会使用这个想法。

我是怎么回答这个问题的？我是不是回答了完全不同的问题？我应该在答案上进行扩展吗？我是不是问得太多了？(最后一个问题的答案是肯定的)

为了响应按下空格键时的注释，可以使用以下函数将该功能添加到上面的代码中。

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