JavaScript输入框字数实时统计更新

 更新时间:2017年06月17日 15:24:36   作者:m0_37893932  
这篇文章主要介绍了JavaScript输入框字数实时统计更新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

在前端开发中,很多情况下需对输入内容进行验证。实时统计功能,对于定长输入而言,可以让用户实时明确输入界限,并合理安排内容。

字数实时统计更新

下面将以【消息内容】为例,设计实现输入框字数实时统计更新功能。
项目架构如下:

message 

    message.css
    message.js
    message.tpl 

1. 在message.tpl文件中定义网页元素

//移动端微信公众号开发
<div class="weui-cell__bd">
  <textarea id="content" class="weui-textarea" placeholder="新消息内容"
                   rows="3">
  </textarea>
  <div class="weui-textarea-counter">
    <span class="contentcount">0</span>/200
  </div>
</div>
//web端业务开发
<div class="modal-body" style="box-sizing: border-box;">
  <form id="newtaskform" class="form-horizontal"></form>
</div>

2.在message.js文件中绑定事件,用以统计输入字符

//移动端 tooltips提示形式
$('#content').bind('input propertychange', function () {
  var fizeNum = $(this).val().length;
  if (fizeNum > 200) {
    var char = $(this).val();
    char = char.substr(0, 200);
    $(this).val(char);
    fizeNum = 200;
    tooltipsShow('消息内容不能超过200字');
  }
  $(this).parent().find('.contentcount').text(fizeNum);
});
//web网页span提示形式
FileName = '<div class="form-group" id="text"><label class="col-sm-3 control-label" id="textlabel"><span class="dot"></span>消息内容</label>'+ 
'<div class="col-sm-9 input-container "><textarea id="msgcontent" name="text" rows="8" style="width:100%;padding-right:20px"></textarea>' +
'<div class="counter" style="float:right;">' +
'<span id="texttips" style="display: none; color: #ff0000;">消息内容超出最大限制</span><span class="contentcount">0</span>/200</div>' +
'</div></div>';
$("#newtaskform").append(FileName);
$('#msgcontent').bind('input propertychange', function () {
  var fizeNum = $(this).val().length;
  if (fizeNum > 200) {
    var char = $(this).val();
    char = char.substr(0, 200);
    $(this).val(char);
    fizeNum = 200;
    $("#texttips").show();
  }else{
    $("#texttips").hide();
  }
  $(this).parent().find('.contentcount').text(fizeNum);
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Swiper如何实现两行四列轮播图效果实例

    Swiper如何实现两行四列轮播图效果实例

    大家应该都知道,Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,下面这篇文章主要给大家介绍了关于Swiper如何实现两行四列轮播图效果的相关资料,需要的朋友可以参考下
    2022-10-10
  • JS进阶之从多线程到Event Loop全面梳理

    JS进阶之从多线程到Event Loop全面梳理

    JS是通过事件队列(Event Loop)的方式来实现异步回调的,但对很多初学JS的人来说,根本搞不清楚单线程的JS为什么拥有异步的能力,所以本文将从进程、线程的角度来解释这个问题
    2023-05-05
  • JavaScript 继承 封装 多态实现及原理详解

    JavaScript 继承 封装 多态实现及原理详解

    这篇文章主要介绍了JavaScript 继承 封装 多态实现及原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 利用JS、CSS实现列表自动滑动滚动效果实例

    利用JS、CSS实现列表自动滑动滚动效果实例

    这篇文章主要给大家介绍了关于利用JS、CSS实现列表自动滑动滚动效果的相关资料,本人在项目中遇到这样的需求,亲自来做的,通过html页面配合js,css来做出的列表自动滑动,需要的朋友可以参考下
    2024-07-07
  • 整理关于Bootstrap表单的慕课笔记

    整理关于Bootstrap表单的慕课笔记

    这篇文章主要为大家整理了关于Bootstrap表单的慕课笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 在JS中如何使用css变量详解

    在JS中如何使用css变量详解

    这篇文章主要给大家介绍了关于如何在JS中如何使用css变量以及export之javascript关键字的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09
  • 最丑的时钟效果!js canvas时钟制作方法

    最丑的时钟效果!js canvas时钟制作方法

    最丑的时钟效果,这篇文章主要为大家详细介绍了js canvas时钟制作方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 函数式 JavaScript(一)简介

    函数式 JavaScript(一)简介

    JavaScript 是一种强大但被误解的语言。关于它到底是一种面向对象的语言还是函数式语言,人们众说纷纭——但是现在让我们把这些争辩都抛到脑后。
    2014-07-07
  • js滑动提示效果代码分享

    js滑动提示效果代码分享

    这篇文章主要为大家分享了js滑动提示效果代码,实现方法简单,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • JavaScript实现手写promise的示例代码

    JavaScript实现手写promise的示例代码

    promise 作为前端开发中常用的函数,解决了 js 处理异步时回调地狱的问题,大家应该也不陌生了,今天来学习一下 promise 的实现过程吧
    2023-04-04

最新评论