Jquery Function_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-12 21:56 出处：网络

I am using the below code to set the character count on a textarea. This solution is working fine as far as i am passing the textarea ID.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var charactersAllowed = 255; // this is picked from widget configuration
        $("#charCount").html(charactersAllowed);
        $("#message").keyup(function() {
            $("#charCount").html(charactersAllowed - ($(this).val().length));
            if($(this).val().length > charactersAllowed) {
                this.value = this.value.s开发者_如何学Goubstring(0, charactersAllowed);
                $("#charCount").html(charactersAllowed - ($(this).val().length));
            }
        });
    });
</script>
</head>
<body>
    <textarea name="message" id="message" tabindex="4" rows="4" cols="35"></textarea>
    <p class="character_limit">Character limit: <span id="charCount"></span></p>
</body>
</html>

what i need to do is to wrap this functionality in function so that i can call this function on any input element. Can i wrap the same code inside a function name and call the same function on Textarea onchange() event?

Please provide me the inputs & help to recode this snippet.

Thanks Lokesh Yadav

You can apply what you have to any text area:

$(document).ready(function() {
    limitTextBox("#message", "#charCount", 255);
});

function limitTextBox(box, charsDisplay, charactersAllowed) {
    var $box = $(box),
        $charsDisplay = $(charsDisplay);
    $charsDisplay.html(charactersAllowed - ($box.val().length));
    $box.keyup(function() {
        $charsDisplay.html(charactersAllowed - ($box.val().length));
        if($box.val().length > charactersAllowed) {
            $box[0].value = $box[0].value.substring(0, charactersAllowed);
            $charsDisplay.html(charactersAllowed - ($box.val().length));
        }
    });

}

Live example

...but can I strongly recommend that you don't do that. Look instead at how StackOverflow limits input into text boxes (such as comments). They let you type whatever you want, but only actually let you save your comment if you're within range. This truncating the content as people type makes for a terrible user experience.

Off-topic: In your original function, sometimes you used val() on a jQuery instance, other times you used value on the raw DOM element. I've preserved that above, but you probably want to pick one or the other and use it throughout.

You could create a plugin like so:

(function($) {
   $.fn.charlimit = function(options) {
       var def = {limit: 250, display: null};
       $.extend(def, options);
       var $display = $(def.display);

       $display.html(def.limit);

       this.bind('change keyup', function() {
            var l = $(this).val().length;
            $display.html(def.limit - l);
            if(l > def.limit) {
                $(this).val(function(i, value) {
                     return value.substring(0, def.limit);
                });
                $display.html(def.limit - $(this).val().length);
            }
       });
       return this; 
   };   
}(jQuery));

And use it with:

$('#message').charlimit({limit: 250, display: '#charCount'});

DEMO

Just use a class (in my example "myclass") on the textareas you want to check and modify this:

$("#message").keyup(function() { ...

Into this:

$("textarea.myclass").keyup(function() { ...

and

$("#charCount")

$(this).find('span.charCount')

Of course you have to edit your HTML and change the span ID to a class (thx @T.J. Crowder for pointing it out!)

Jquery Function

精彩评论

关注公众号

热门标签

图文推荐

Jquery Function

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：