621天前2018-11-28 14:38:52 |    抢沙发  494 
在web开发中利用js开发一些小功能是非常高效非常方便的,因为它有很多的事件可以出发,很多功能也是动态程序无法实现的,这次就跟随静心一起来看看在web中怎么实现对input标签和textarea标签的输入进行字符串长度统计并实时输出吧!

JavaScript

我先上代码再解释哈!

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<input type="text" name="school_title" oninput="school_title()" id="school_title">
<span id="school_title_count">0/80</span>
<script type="text/javascript">
  function school_title(){
    var count = document.getElementById("school_title").value.length;
    document.getElementById("school_title_count").innerHTML=count+"/80";
  }

</script>
</body>
</html>
代码解释:

这里我们利用了input的oninput事件,这个事件就是当input中的value值发生变化的时候就会触发oninput事件,然后去执行指定的函数。

在这里我们首先给input指定了一个id用于定位获取value的字符串长度。然后给输出位置也指定一个ID当input的value值发生变化的时候就统计长度并输出到span标签中。

效果如下图:

发表评论

暂无评论

登录

忘记密码 ?

切换登录

注册

扫一扫二维码分享