Jquery Twitter喜歡字符計數器偏移縮短鏈接

你好，我試圖模仿在twitter上的字符計數器。所以當你輸入或粘貼限制減少。但是我爲此寫的服務也會有一個url縮寫，所以我想通過最終URL的字符數來抵消它。縮短髮生在發佈端，而不是在輸入URL時發生。Jquery Twitter喜歡字符計數器偏移縮短鏈接

我幾乎所有的工作，但是當我點擊元素的偏移量不再存在，並且字符計數被設置回它將是如果鏈接是他們的全長。我相信這是因爲我使用.change（）方法而不是.bind（「輸入粘貼」），但輸入粘貼未應用偏移量。

/* Character Count for Posts */     
function checkPostForURL(post){ 
    var matches = [], 
     urlexp = new RegExp("(^|[ \t\r\n])((http|https):(([A-Za-z0-9$_.+!*(),;/?:@&~=-])|%[A-Fa-f0-9]{2}){2,}(#([a-zA-Z0-9][a-zA-Z0-9$_.+!*(),;/?:@&~=%-]*))?([A-Za-z0-9$_+!*();/?:~-]))","g"), 
     $linkShort = $('#linkstoshort'), 
     matchIdx = 0; 

    if (post !== undefined){ 
     if (urlexp.test(post)){ 
       var offset = 0; 
       $('.shortenlinks').show(); 
       matches = post.match(urlexp); 

       $linkShort.html(''); 

       for(; matchIdx < matches.length; matchIdx++) { 
        var match = matches[matchIdx], 
         matchOffset = match.length - 23; 

        offset += matchOffset; 

        $linkShort.append('<li>'+match+'</li>'); 
       } 

       return offset; 
     } 
    } 
} 

$(function(){ 
    var $postMsg = $('#post-msg'), 
     message = $postMsg.text(), 
     twstartchars = 140 - message.length, 
     fbstartchars = 420 - message.length, 
     $fbCount = $("#fb-char"), 
     $twCount = $("#tw-char"), 
     setRemainingChars = function (evt) { 
      var a = $postMsg.val().length, 
       post = $postMsg.val();   

      var offset = checkPostForURL(post); 
      if (offset){ 
       a = a - offset; 
      } 

      $fbCount.text((420-a)); 
      $twCount.text((140-a)); 
      if (a > 120){ 
        $fbCount.css('color','red'); 
        if (a > 380){ 
          $fbCount.css('color','red'); 
        } 
      }else{ 
        $fbCount.css('color','#333'); 
        $twCount.css('color','#333'); 
      } 
     }; 

    $fbCount.text(fbstartchars); 
    $twCount.text(twstartchars); 

    $postMsg.on('keypress change', setRemainingChars); 
});

更新：我做了一個JS小提琴更好地展示什麼，我試圖做 http://jsfiddle.net/FUADn/384/

來源

2011-11-29 BillPull

這太棒了。但是，我不確定21號來自哪裏。我假設這只是Twitter縮短網址的方式。我去了twitter.com，我認爲21應該是23，似乎與你的代碼和我的twitter.com測試有2個字符的差異。真棒片段，否則:) – chrisallick

是啊，這是3年前，因爲那時他們需要添加更多的字符到這個縮短的網址，這是一個真正的痛苦屁股考慮時，這一點。絕對讓我意識到我現在在JS有多好，現在生病了更新了一些修改 – BillPull

的答案哈哈，這並不是很糟糕。我即將發送一個網站生活，基本上使用你的代碼稍作修改，幷包裝成一個jquery插件，所以我可以得到計算值。好的片段！ – chrisallick

您是否嘗試過在輸入而不是改變事件綁定一個.keyup（）事件？這應該在技術上起作用並且在你使用槌球后保持綁定等。

來源

2011-11-29 16:34:31 Jamie

我嘗試了相同的結果。你可以提供一個代碼示例或修改上面的jsfiddle。 – BillPull

http://jsfiddle.net/FUADn/2/ - 當我移出盒子時，這似乎對我很好。 – Jamie

Jquery Twitter喜歡字符計數器偏移縮短鏈接

回答

相關問題