jQuery函数 [英] Jquery Function

查看:110
本文介绍了jQuery函数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用以下代码在文本区域上设置字符数.就我通过textarea ID而言,此解决方案工作正常.

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.substring(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>

我需要做的是将此功能包装在函数中,以便可以在任何输入元素上调用此函数. 我可以在函数名称中包装相同的代码,并在Textarea onchange()事件上调用相同的函数吗?

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.

谢谢 洛克希·亚达夫(Lokesh Yadav)

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));
        }
    });

}

在线示例

...但是我可以强烈建议您不要这样做.相反,请看一下StackOverflow如何限制输入到文本框(例如注释)中.他们让您键入所需的任何内容,但实际上只有在您输入的范围内时,才可以保存您的评论.当人们键入内容时,内容会被截断,这会带来糟糕的用户体验.

...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.

离题:在您的原始函数中,有时您在jQuery实例上使用val(),而其他时候在原始DOM元素上使用value.我已经在上面保留了此内容,但您可能希望选择其中一个并在整个过程中使用它.

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.

这篇关于jQuery函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆