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

（如果需要在普通視圖中包括腳本，請參考此答案以獲取指導。）

結果應如下所示：