Jquery函数

发布于 2024-10-19 02:09:26 字数 1357 浏览 1 评论 0原文

我使用下面的代码来设置文本区域的字符数。就我传递文本区域 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() 事件上调用相同的函数吗？

请向我提供输入和信息帮助重新编码这个片段。

谢谢洛克什·亚达夫

原文

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>

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

回忆躺在深渊里 2024-10-26 02:09:26

您可以将您所拥有的内容应用到任何文本区域：

$(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 如何限制文本框中的输入（例如注释）。它们可以让你输入任何你想要的内容，但只有在范围内时才真正让你保存评论。当人们输入时截断内容会带来糟糕的用户体验。

离题：在原始函数中，有时您在 jQuery 实例上使用 val()，有时您在原始 DOM 上使用 value元素。我在上面保留了它，但您可能想选择其中之一并在整个过程中使用它。

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.

回复收藏 0 原文

水染的天色ゝ 2024-10-26 02:09:26

您可以像这样创建一个插件：

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

并将其与以下内容一起使用：

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

DEMO

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

回复收藏 0 原文

别闹i 2024-10-26 02:09:26

只需在要检查和修改的文本区域上使用一个类（在我的示例中为“myclass”）即可：

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

Into this:

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

和

$("#charCount")

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

当然，您必须编辑 HTML 并将 span ID 更改为类（thx @TJ Crowder for指出来！）

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!)

回复收藏 0 原文

~没有更多了~

关于作者

傲影

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

Jquery函数

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

Jquery函数

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。