angular textarea字符长度的限制

Textarea字符计数器

最新推荐文章于 2025-05-12 20:58:08 发布

dbat.top

最新推荐文章于 2025-05-12 20:58:08 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端 angular 文章标签： web前端 Angular textarea

本文链接：https://blog.youkuaiyun.com/zhuhaomingoo/article/details/52932022

web前端同时被 2 个专栏收录

18 篇文章

订阅专栏

angular

2 篇文章

订阅专栏

本文介绍了一个使用jQuery和AngularJS实现的动态字符计数器。该计数器应用于<textarea>元素，当用户输入内容时实时更新剩余可输入的字符数量，并在超出限制时给出提示。

这段代码呢是网上荡的一部风然后自己改进了一部风，由于项目需要textarea的字符要求动态显示，所以通过jquery 和 angular配合使用了一下也许还有不少大神有

更简便的方法。我本人想了个笨招直接用jq操作DOM来完成。希望能帮到别人。

<span class="help-block" id="textcount">还可以输入300字</span>

<textarea class="form-control" id="txt" ng-change="changed()" rows="3" ng-model="article.summary"></textarea>

$scope.changed = function () {
  $scope.textcount=300-$scope.article.summary.length;
  if($scope.textcount<=0){
    $scope.textcount=0;
    $("#textcount").css("color","red")
  }else{
    $("#textcount").css("color","#ccc")
  }
  $("#textcount").text("还可以输入"+$scope.textcount+"字");

  if ($scope.article.summary.length > 300) {
    $scope.article.summary = $scope.article.summary.substr(0, 300);
  }
};