将TextBox限制为500个字符

Question

我试图将我的文本框限制为包含最多500个字符，例如我想从用户那里收到一个问题，但是最大长度是500，我怎样才能显示写作时剩下的字符数？

这是我在视图中的代码，但我不知道它不起作用，我尝试了各种方法！

<li>
    @Html.LabelFor(m => m.TeacherQuestion, new { maxlength = 500 })
    @Html.TextBoxFor(m => m.TeacherQuestion  , new { maxlength = 500})
</li> 

Answer 1

没有内置元素或属性 - 您需要使用Javascript。

为输入分配ID并添加新元素以保留剩余字符数

@Html.TextBoxFor(m => 
    m.TeacherQuestion, new { id = "questionInput", maxlength = 500 })
<span id="charsLeft"></span>

接下来添加对jQuery的引用，并将以下Javascript添加到布局视图中：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(function () {
        $("#questionInput").keyup(function () {
            var charsLeft = $(this).attr("maxlength") - $(this).val().length;
            $("#charsLeft").text(charsLeft + " characters left");
        });
    });
</script>

（如果您需要在普通视图中包含该脚本，请参阅此answer以获取指导。）

结果应如下所示：