用于缩短链接的Jquery类Twitter字符计数器偏移量

你好，我正在努力模仿twitter上的字符计数器。因此，当您键入或粘贴时，限制会降低。但是我写这篇文章的服务也会有一个url缩短器，所以我想用最终url的字符数来抵消它。缩短发生在发布端，而不是输入URL时

我有几乎所有的工作，但当我点击了元素的偏移量不再存在，字符计数设置回它将是什么，如果链接是他们的全长。我相信这是因为我使用的是.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);
});

/*帖子的字符数*/
函数checkPostForURL（post）{
var matches=[]，
urlexp=new RegExp（（^ |[\t\r\n]）（（http | https）：（[A-Za-z0-9$）+！*（），/？：@&=-]）|%[A-Fa-f0-9]{2}（#）（[A-Za-z0-9][A-Za-z0-9$+！*（），；/：：&&-]-*）（[A-Za-z0-9]：-），/）（[A-Za-z0-z0-9-）-），/），---，，-），，，，，，，---，
$linkShort=$（“#linkstoshort”），
matchIdx=0；
如果（post！==未定义）{
if（urlexp.测试（post））{
var偏移=0；
$（'.shortenlinks'）.show（）；
匹配=post.match（urlexp）；
$linkShort.html（“”）；
对于（；matchIdx'+match+''）；
}
返回偏移量；
}
}
}
$（函数（）{
var$postsg=$（“#post msg”），
message=$postsg.text（），
twstartchars=140-message.length，
fbstartchars=420-message.length，
$fbCount=$（“#fb char”），
$twCount=$（“#tw char”），
setRemainingChars=函数（evt）{
变量a=$postsg.val（）.length，
post=$postsg.val（）；
var offset=checkPostForURL（post）；
如果（偏移）{
a=a-偏移量；
}
$fbCount.text（（420-a））；
$twCount.text（（140-a））；
如果（a>120）{
$fbCount.css（'color'，'red'）；
如果（a>380）{
$fbCount.css（'color'，'red'）；
}
}否则{
$fbCount.css（'color'，'#333'）；
$twCount.css（'color'，'#333'）；
}
};
$fbCount.text（fbstartchars）；
$twCount.text（twstartchars）；
$POSTSG.on（'keypress change'，setRemainingChars'）；
});

更新：我做了一个JS提琴来更好地演示我要做的事情

---

您是否尝试在输入上绑定.keyup（）事件而不是更改事件？从技术上讲，这应该可以工作，并在使用鼠标等后保持绑定。

我尝试了keyup，得到了相同的结果。您能提供一个代码示例或修改上面的JSFIDLE吗这对我来说似乎很好，当我搬出盒子的时候，这太棒了。然而，我不知道21号是从哪里来的。我想这就是Twitter缩短url的方式。我去了twitter.com，我认为21应该是23。您的代码和我的twitter.com测试似乎有2个字符的差异。另外还有一个很棒的片段：）是的，这是3年前的事了，从那时起，他们需要在缩短的URL中添加更多的字符，这在制作这个URL时真是让人头疼。这肯定会让我意识到我现在在JS方面有多出色。我会用一些修改来更新答案。哈哈，没那么糟糕。我将要发送一个站点，该站点基本上使用您的代码，只需稍加修改，并封装到jquery插件中，这样我就可以得到计算值。好片段！