asp.net mvc-带参数的Javascript字符计数器功能

asp.net mvc - Javascript character counter function with parameters

本文关键字：Javascript 字符 计数器 功能 参数 net mvc- asp      更新时间：2023-09-26

我是javascript的初学者，我在编辑器中实现了。对于在某个地方找到的字符计数器，下面是它在代码中的样子：

<span class="text-length-counter" id="email_counter"></span>                  
@Html.EditorFor(model => model.ProfileFormDto.Email,  new { htmlAttributes = new { @class = "form-control create-view-field", id="email_area" }})

这里有一个javascript函数来完成这项工作：

 $(document).ready(function() {
      var text_max = 50;
      var text_length = $('#email_area').val().length;
      $('#email_counter').html(text_length +' / ' + text_max + ' znaków');
      $('#email_area').keyup(function() {
          var text_length = $('#email_area').val().length;
          $('#email_counter').html(text_length + ' / ' + text_max + ' znaków');
      });
  });

它工作得很好，但我必须修改这个函数（），因为我必须在一页上使用许多计数器，所以上面的函数必须有三个参数，比如：Count（counter，area，max）。我无法应付。在部分中有我的新函数声明

        $(document).ready(function () {
        Count('email_counter','email_area',50);
    });
    function Count(counter,area,max) {
        var text_length = $('#area').val().length;
        $('#counter').html(text_length +' / ' + max + ' znaków');
        $('#area').keyup(function() {
            var text_length = $('#area').val().length;
            $('#counter').html(text_length + ' / ' + max + ' znaków');
        });
    };

它不起作用，我得到错误：管理：169未捕获类型错误：无法读取未定义的属性"长度"

您的jQuery选择器当前正在尝试选择id="area"和id="counter"的元素

如果要将面积和计数器转换为参数，则需要使用$（'#'+面积）和$（'#'+计数器）进行选择。

有了这个更新，你的代码看起来就像

function Count(counter, area, max) {
  var text_length = $('#'+area).val().length;
  $('#'+counter).html(text_length +' / ' + max + ' znaków');
  $('#'+area).keyup(function() {
    var text_length = $('#'+area).val().length;
    $('#'+counter).html(text_length + ' / ' + max + ' znaków');
  });
};

这是一个具有多个输入字段的工作jsfiddle。

您的选择器文本不正确。

Count('email_counter','email_area',50);
function Count(counter, area, max) {
    var text_length = $('#' + area).val().length;
    ...
    $('#' + counter).html(text_length +' / ' + max + ' znaków');
}
相关文章：