如何为 textarea 创建字符计数器? (角度)

Posted

技术标签:

【中文标题】如何为 textarea 创建字符计数器? (角度)【英文标题】:How to create a character counter for textarea ? (angular) 【发布时间】:2017-06-20 18:14:07 【问题描述】:

代码:

    <div class="form-group">
      <label class="control-label" for="content">Content</label>
      <textarea name="content" data-ng-model="vm.article.content" id="content" class="form-control" cols="30" rows="10" placeholder="1400 characters long at least" required ng-minlength="1400" ng-maxlength="14000" highlight-on-error></textarea>
        <!--counter-->
      <br>
      <span class="form-help">1400-vm.article.content.length         
       Characters</span>
      <div ng-messages="vm.form.articleForms.content.$error" role="alert">
        <p class="help-block error-text" ng-message="required">Article title is required.</p>
      </div>
    </div>

情况:

如果使用 ng-messages 的字数太低,我会尝试在提交时显示错误消息:错误消息不会出现。

我也在尝试实时更新文本区域的字数。它没有更新。

我做错了什么?


参考:

angularjs text area character counter


附注:

我正在使用 mean.js

【问题讨论】:

【参考方案1】:

工作正常:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<body ng-app> 
    <div class="form-group">
      <label class="control-label" for="content">Content</label>
      <textarea name="content" data-ng-model="vm.article.content" id="content" class="form-control" cols="30" rows="10" placeholder="1400 characters long at least" required ng-maxlength="1400" highlight-on-error></textarea>
        <!--counter-->
      <br>
      <span class="form-help">1400-vm.article.content.length         
       Characters</span>
      <div ng-messages="vm.form.articleForms.content.$error" role="alert">
        <p class="help-block error-text" ng-message="required">Article title is required.</p>
      </div>
    </div>
    
</body>

【讨论】:

但我需要 ng-minlength。 @Coder1000 您应该添加验证,例如 min allow 1400 character 在哪里?你能解释一下吗? @Coder1000 检查一下 - scotch.io/tutorials/angularjs-form-validation-with-ngmessages 这在这种情况下无济于事:例如在我的代码中,ng-message "required" 没有出现:/

以上是关于如何为 textarea 创建字符计数器? (角度)的主要内容,如果未能解决你的问题,请参考以下文章

如何为每个数组元素创建一个计数器?

如何为textarea添加价值[重复]

如何为对象计数多个关系创建谓词?核心数据 iOS Swift

带有 css 的角度 HTML 预览

如何为 getline() 实现超时? [复制]

如何为 R 中使用百分比而不是计数作为 y 轴的数据框创建条形图?