JavaScript动态提示输入框输入字数的方法,AngularJS实现的输入框字数限制提醒功能示例

随着你在文本框中输入多少字,还可以输入多少字,已经输入多少字,这里再为大家推荐2款功能相似的在线工具供大家参考,在线字数统计工具,分享给大家供大家参考

本文实例讲述了JavaScript动态提示输入框输入字数的方法。分享给大家供大家参考。具体如下:

本文实例讲述了AngularJS实现的输入框字数限制提醒功能。分享给大家供大家参考,具体如下:

在QQ空间里有小纸条那么一个功能,随着你在文本框中输入多少字,上面会动态提示你“已经输入多少字”和“还可以输入多少字”,觉得挺好的,所以自己也试着做做,呵呵。
 
开始,我想很多人第一感觉就是通过js的
onkeydown或者onkeyup来做,中发现还可以用focus + setInterval()
+blur来达到我们需要的效果,于是很快的我利用这种方法自己粗糙的写了一下,达到了预期的效果。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>www.jb51.net AngularJS字数提示</title>
</head>
<style>
  *{
    margin:0;
    padding:0;
  }
  input,button,textarea,select{
    outline:none;
  }
  textarea{
    resize:none;
  }
  .content{
    width:350px;
    height:150px;
    font-size:18px;
    text-indent:40px;
    overflow-y: hidden;
    overflow-x: hidden;
  }
  .content:hover{
    border:1px solid #00ffff;
    cursor:pointer;
  }
  .top{
    vertical-align:top;
  }
  .fontColor
  {
    color:#eee;
  }
  .tableT td{
    margin-right:20px;
  }
</style>
<body ng-app="myApp" ng-controller="myControl">
<table class="tableT">
  <tr>
    <td class="top">退货说明&nbsp:</td>
    <td><textarea id="sayId" class="content" ng-model="say" ng-keyup="changeText()"></textarea></td>
  </tr>
  <tr>
    <td></td>
    <td class="fontColor">你还可以输入{{textLength}}字</td>
  </tr>
</table>
</body>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
  var app = angular.module('myApp',[]);
  app.controller('myControl',function($scope){
    $scope.textLength = 10;
    $scope.changeText = function(){
      var length = $("#sayId").val().length;  //使用$scope.say.length的时候,输入空格的时候没有计算空格长度。
      console.log(length);
      $scope.textLength = 10 - length;
      if($scope.textLength<=0){
        $scope.textLength = 0;
        $("#sayId").val($scope.say.slice(0,10));
      }
    }
  });
</script>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>IT技术网-JavaScript动态提示输入框输入字数</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function $(obj){
return document.getElementById(obj);
}
function sp(){
var tex = $('te').value;
var nun =tex.length;
var spa = $('span');
spa.innerHTML = nun;
}
</script>
</head>
<body>
你已经输入了0字
<input value="" id="te" type="text" onfocus="ss=setInterval(sp,600)" onblur="clearInterval(ss)"/>
</body>
</html>

运行效果:

希望本文所述对大家的javascript程序设计有所帮助。

图片 1

您可能感兴趣的文章:

  • 关于JavaScript限制字数的输入框的那些事
  • JavaScript输入框字数实时统计更新
  • JavaScript中统计Textarea字数并提示还能输入的字符
  • Javascript实现真实字符串剩余字数提示的实例代码
  • .NET+JS对用户输入内容进行字数提示功能的实例代码
  • 利用Angularjs和原生JS分别实现动态效果的输入框
  • Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
  • AngularJS实现的输入框字数限制提醒功能示例

PS:这里再为大家推荐2款功能相似的在线工具供大家参考:

在线字数统计工具:

在线字符统计与编辑工具:

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS
MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

您可能感兴趣的文章:

  • JavaScript动态提示输入框输入字数的方法
  • 关于JavaScript限制字数的输入框的那些事
  • JavaScript输入框字数实时统计更新
  • JavaScript中统计Textarea字数并提示还能输入的字符
  • Javascript实现真实字符串剩余字数提示的实例代码
  • .NET+JS对用户输入内容进行字数提示功能的实例代码
  • 利用Angularjs和原生JS分别实现动态效果的输入框
  • Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)