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>