jQuery表单输入文字计数显示代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery表单输入文字计数显示代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery表单输入文字计数显示代码</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">

</head>
<body>
<div class="form">
	<div class="container">
	  <form class="form-signin">
		<h2 class="form-signin-heading">演示</h2>
		<div class="form-group">
			<label for="inputTitle">标题</label>
			<input type="text" id="inputTitle" class="form-control">
		</div>
		<div class="form-group">
		<label for="inputDescription">描述</label>
		<textarea id="inputDescription" class="form-control"></textarea>
		</div>
	  </form>
	</div>
</div>

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script src="js/jquery.charactercounter.js"></script>
<script>
$(document).ready(function(e) {
	$('#inputTitle').characterCounter(30);
	$('#inputDescription').characterCounter(80);
});
</script>
</body>
</html>

JS代码(ie10-viewport-bug-workaround.js):

/*! * IE10 viewport hack for Surface/desktop Windows 8 bug * Copyright 2014 Twitter,Inc. * Licensed under the Creative Commons Attribution 3.0 Unported License. For * details,see http://creativecommons.org/licenses/by/3.0/. */
// See the Getting Started docs for more information:// http://getbootstrap.com/getting-started/#support-ie10-width(function (){
	'use strict';
	if (navigator.userAgent.match(/IEMobile\/10\.0/)){
	var msViewportStyle = document.createElement('style') msViewportStyle.appendChild( document.createTextNode( '@-ms-viewport{
	width:auto!important}
' ) ) document.querySelector('head').appendChild(msViewportStyle)}
}
)();

CSS代码(default.css):

@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{padding-top:40px;padding-bottom:40px;background-color:#eee;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.form{margin:0 auto;text-align:center;overflow:hidden;}
.form-signin{max-width:330px;padding:15px;margin:0 auto;}
.form-signin .form-signin-heading,.form-signin .checkbox{margin-bottom:10px;}
.form-signin .checkbox{font-weight:normal;}
.form-signin .form-control{position:relative;height:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;font-size:16px;}
.form-signin .form-control:focus{z-index:2;}
.form-signin input[type="email"]{margin-bottom:-1px;border-bottom-right-radius:0;border-bottom-left-radius:0;}
.form-signin input[type="password"]{margin-bottom:10px;border-top-left-radius:0;border-top-right-radius:0;}

附件:下载该文件资源,减少时间成本(增值服务)