Bit.ly 공유 텍스트 기능

Question

링크를 입력하자마자 bit.ly가 텍스트 영역을 대체하는 방법에 대한 단서가있는 사람이 있습니까?

Answer 1

나는 OP가 페이지를 다시로드하지 않고도 긴 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>