Bit.ly 共享文本框功能

Question

有没有人知道 bit.ly 是如何在您完成输入链接后立即替换 textarea 的？

Answer 1

我认为 OP 是在询问 bit.ly 如何在不重新加载页面的情况下将长 URL 转换为较短的 URL。这将通过对网页的 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，然后 JavaScript 会设置样式并显示数据。我无法具体说明 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>