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

Question

你好，我试图模仿推特上的字符计数器。所以当你输入或粘贴时，极限会减小。但是我写这篇文章的服务也会有一个url缩短器，所以我想用最终url的字符数来抵消它。缩短发生在发布端，而不是当你输入URL。

我有几乎所有的工作，但当我点击元素的偏移量不存在了，字符计数被设置回它将是什么，如果链接是他们的完整长度。我相信这是因为我使用的是。change()方法而不是。bind("input paste")，但是input paste没有应用偏移量。

/* Character Count for Posts */                
function checkPostForURL(post){
    var matches = [],
        urlexp = new RegExp("(^|[ trn])((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/

Answer 1

您是否尝试在输入上绑定.keyup()事件而不是更改事件?从技术上讲，这应该可以工作，并且在您使用most等之后保持绑定。