对文本区域中的字符进行计数的标签

本文关键字：标签 字符 文本 区域 | 更新日期: 2023-09-27 18:02:40

我在我的视图中有这个文本区，我可以输入文本:

@Html.TextAreaFor(x => model.text, new { @class = "form-control", style = "text-align: center" })

我想在textArea下面添加一个标签来计数字符(包括空格)。理想情况下，如果我能输入一个数字，让计数器从这个数字开始倒数，那就太好了。

对文本区域中的字符进行计数的标签

我的片段它是一个完整的纯HTML/Javascript解决方案(没有测试很好，我很抱歉)，这是一个FIDDLE，我认为你只需要一堆 Javascript来实现你的任务。缺少Canc的管理，只管理单个按键。你在找什么——像这样的东西吗?

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .counter{
            display:block;
            height:5px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div>
        <textarea class="target"></textarea>
        <span class="counter"></span>
    </div>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var oldCount = 0;
            var $area = $('.target');
            var $label = $('.counter');
            $label.css('width', $area.width());
            $area.on('keyup', function () {
                var currentCount = $area.val().length;
                if (currentCount > oldCount && currentCount > 0) {
                    $label.width($label.width() - 10);
                }
                else if (currentCount < oldCount && $label.width() < $area.width())
                {
                    $label.width($label.width() + 10);
                }
                oldCount = currentCount;
            });
        });
        </script>
    </body>
</html>
相关文章：