JavaScript窗體字符計數器/驗證C＃項目

Question

我試圖在用戶輸入數據的文本字段旁邊顯示一個計數器。對於輸入的每個字符，此計數器應該從43開始倒數。我已經嘗試過爲下面的字段實現解決方案，但不知道如何給我沒有使用純HTML的形式。

<div class="editor-field" onkeyup="textCounter(this,'counter',43);"> 
     @Html.EditorFor(model => model.FIELD_DESCRIPTION) 
     @Html.ValidationMessageFor(model => model.FIELD_DESCRIPTION) 
    </div> 
<script> 
    function textCounter(field, field2, maxlimit) { 
     var countfield = document.getElementById(field2); 
     if (field.value.length > maxlimit) { 
      field.value = field.value.substring(0, maxlimit); 
      return false; 
     } else { 
      countfield.value = maxlimit - field.value.length; 
     } 
    } 
</script> 

更新：

查看

<div class="editor-field"> 
     @Html.EditorFor(model => model.FIELD_DESCRIPTION) 
     @Html.ValidationMessageFor(model => model.FIELD_DESCRIPTION) 
    </div> 
<script> 
    $('#FIELD_DESCRIPTION').keydown(function() { 
     var len = 43 - $(this).val().length; 
     if (len > 0) 
      $('#field-validation-valid').text(len); 
     else 
      $('#field-validation-valid').text(0); 
    }); 

    $('#FIELD_DESCRIPTION').keydown(); 

頁面源代碼

<div class="editor-label"> 
     <strong><label for="FIELD_DESCRIPTION">FIELD_DESCRIPTION</label></strong> 
    </div> 
    <div class="editor-field"> 
     <input class="text-box single-line" id="FIELD_DESCRIPTION" name="FIELD_DESCRIPTION" type="text" value="" /> 
     <span class="field-validation-valid" data-valmsg-for="FIELD_DESCRIPTION" data-valmsg-replace="true"></span> 
    </div> 
<script> 
    $('#FIELD_DESCRIPTION').keydown(function() { 
     var len = 43 - $(this).val().length; 
     if (len > 0) 
      $('#field-validation-valid').text(len); 
     else 
      $('#field-validation-valid').text(0); 
    }); 

    $('#FIELD_DESCRIPTION').keydown(); 
</script> 

更新：我得到它的工作。儘管限制用戶輸入一次可能會限制用戶的身份，但可能會有所幫助。不知道我該怎麼做。

<div class="editor-field"> 
     @Html.EditorFor(model => model.FIELD_DESCRIPTION)&nbsp<span id="field-validation-valid" 
     @Html.ValidationMessageFor(model => model.FIELD_DESCRIPTION) 
    </div> 
<script> 
    $('#FIELD_DESCRIPTION').keydown(function() { 
     var len = 43 - $(this).val().length; 
     if (len > 0) 
      $('#field-validation-valid').text(len + " remaining"); 
     else 
      $('#field-validation-valid').text(0); 
    }); 

    $('#FIELD_DESCRIPTION').keydown(); 
</script> 

Answer 1

這裏是我做同樣的事情了Twitter共享飼料的摘錄。

// on any user input, check the text length 
$("#input-field").on("paste input keydown keyup mouseup blur", function() { 
    var twitCount = (140 - $("#input-field").val().length); 

    //update the counter element to display 
    $("#display-counter-field").html(twitCount); 

    // if the twitterCounter gets below 14 left, then add a warning class to 
    // highlight the counter 
    (twitCount < 14) 
     ? $("#display-counter-field").addClass("warning") 
     : $("#display-counter-field").removeClass("warning"); 
}); 

// trigger the event so that we can ensure pre-rendered data 
// respects this as well 
$("#input-field").trigger('keyup'); 

Answer 2

這是您需要的嗎？ http://jsfiddle.net/ob3vume7/

<div> 
    <input id='inp'><span id='inp-count' /> 
</div> 

<script> 
    $('#inp').keydown(function(){ 
     var len = 43 - $(this).val().length; 
     if(len > 0)  
      $('#inp-count').text(len); 
     else 
     $('#inp-count').text(0);  
    }); 

    $('#inp').keydown(); 
</script>