Question

我在我的视图中得到了这个textarea，我可以输入文字：

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

我想在textArea下面添加一个标记来计算字符（包括空格）。理想情况下，如果我可以输入一个数字并让计数器从该数字开始倒数就会很棒。

Answer 1

我的代码段是一个完整的纯 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>

在textarea下计算字符数的标签

1 个答案: