快捷導(dǎo)航

JavaScript輸入框字?jǐn)?shù)實(shí)時(shí)統(tǒng)計(jì)更新

更新時(shí)間：2017年06月17日 15:24:36 作者：m0_37893932

這篇文章主要介紹了JavaScript輸入框字?jǐn)?shù)實(shí)時(shí)統(tǒng)計(jì)更新，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在前端開發(fā)中，很多情況下需對(duì)輸入內(nèi)容進(jìn)行驗(yàn)證。實(shí)時(shí)統(tǒng)計(jì)功能，對(duì)于定長(zhǎng)輸入而言，可以讓用戶實(shí)時(shí)明確輸入界限，并合理安排內(nèi)容。

字?jǐn)?shù)實(shí)時(shí)統(tǒng)計(jì)更新

下面將以【消息內(nèi)容】為例，設(shè)計(jì)實(shí)現(xiàn)輸入框字?jǐn)?shù)實(shí)時(shí)統(tǒng)計(jì)更新功能。
項(xiàng)目架構(gòu)如下：

message

    message.css
    message.js
    message.tpl

1. 在message.tpl文件中定義網(wǎng)頁(yè)元素

//移動(dòng)端微信公眾號(hào)開發(fā)
<div class="weui-cell__bd">
  <textarea id="content" class="weui-textarea" placeholder="新消息內(nèi)容"
                   rows="3">
  </textarea>
  <div class="weui-textarea-counter">
    <span class="contentcount">0</span>/200
  </div>
</div>
//web端業(yè)務(wù)開發(fā)
<div class="modal-body" style="box-sizing: border-box;">
  <form id="newtaskform" class="form-horizontal"></form>
</div>

2.在message.js文件中綁定事件，用以統(tǒng)計(jì)輸入字符

//移動(dòng)端 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('消息內(nèi)容不能超過(guò)200字');
  }
  $(this).parent().find('.contentcount').text(fizeNum);
});
//web網(wǎng)頁(yè)span提示形式
FileName = '<div class="form-group" id="text"><label class="col-sm-3 control-label" id="textlabel"><span class="dot"></span>消息內(nèi)容</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;">消息內(nèi)容超出最大限制</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);
});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Swiper如何實(shí)現(xiàn)兩行四列輪播圖效果實(shí)例
大家應(yīng)該都知道,Swiper是純javascript打造的滑動(dòng)特效插件,面向手機(jī)、平板電腦等移動(dòng)終端,下面這篇文章主要給大家介紹了關(guān)于Swiper如何實(shí)現(xiàn)兩行四列輪播圖效果的相關(guān)資料,需要的朋友可以參考下
2022-10-10
JS進(jìn)階之從多線程到Event?Loop全面梳理
JS是通過(guò)事件隊(duì)列(Event?Loop)的方式來(lái)實(shí)現(xiàn)異步回調(diào)的，但對(duì)很多初學(xué)JS的人來(lái)說(shuō)，根本搞不清楚單線程的JS為什么擁有異步的能力，所以本文將從進(jìn)程、線程的角度來(lái)解釋這個(gè)問(wèn)題
2023-05-05
JavaScript 繼承封裝多態(tài)實(shí)現(xiàn)及原理詳解
這篇文章主要介紹了JavaScript 繼承封裝多態(tài)實(shí)現(xiàn)及原理詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
利用JS、CSS實(shí)現(xiàn)列表自動(dòng)滑動(dòng)滾動(dòng)效果實(shí)例
這篇文章主要給大家介紹了關(guān)于利用JS、CSS實(shí)現(xiàn)列表自動(dòng)滑動(dòng)滾動(dòng)效果的相關(guān)資料,本人在項(xiàng)目中遇到這樣的需求,親自來(lái)做的,通過(guò)html頁(yè)面配合js,css來(lái)做出的列表自動(dòng)滑動(dòng),需要的朋友可以參考下
2024-07-07
整理關(guān)于Bootstrap表單的慕課筆記
這篇文章主要為大家整理了關(guān)于Bootstrap表單的慕課筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
在JS中如何使用css變量詳解
這篇文章主要給大家介紹了關(guān)于如何在JS中如何使用css變量以及export之javascript關(guān)鍵字的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2021-09-09
最丑的時(shí)鐘效果！js canvas時(shí)鐘制作方法
最丑的時(shí)鐘效果，這篇文章主要為大家詳細(xì)介紹了js canvas時(shí)鐘制作方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
函數(shù)式 JavaScript（一）簡(jiǎn)介
JavaScript 是一種強(qiáng)大但被誤解的語(yǔ)言。關(guān)于它到底是一種面向?qū)ο蟮恼Z(yǔ)言還是函數(shù)式語(yǔ)言，人們眾說(shuō)紛紜——但是現(xiàn)在讓我們把這些爭(zhēng)辯都拋到腦后。
2014-07-07
js滑動(dòng)提示效果代碼分享
這篇文章主要為大家分享了js滑動(dòng)提示效果代碼，實(shí)現(xiàn)方法簡(jiǎn)單，感興趣的小伙伴們可以參考一下
2016-03-03
JavaScript實(shí)現(xiàn)手寫promise的示例代碼
promise?作為前端開發(fā)中常用的函數(shù)，解決了?js?處理異步時(shí)回調(diào)地獄的問(wèn)題，大家應(yīng)該也不陌生了，今天來(lái)學(xué)習(xí)一下?promise?的實(shí)現(xiàn)過(guò)程吧
2023-04-04