<body>
<br>
<h3 class="text-center">动态检测用户输入内容</h3>
<br>
<!--
css @font-face 自定义字体
bootstrap 栅格列偏移
val() 多行文本的值
bind() 为被选元素绑定事件处理函数
input propertychange:文本值发生变佛直接触发
text() 文本内容,如果不传值则为获取,传值,则直接进行赋值
-->
<style>
/* 自定义一种字体样式 */
@font-face {
font-family: ThinExt;
src: url('HelveticaNeueLT-ThinExt.otf');
}
.btmNum {
font-size: 18px;
font-family: ThinExt;
margin-top: 12px;
}
.btmNum span {
color: #f00;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="" class="col-sm-2 control-label">留言内容</label>
<div class="col-sm-10">
<textarea id="msg" class="form-control" rows="3" maxlength="50"></textarea>
<!-- maxlength="50"最常输入50个字 -->
<div class="btmNum">
<span class="textNum">0</span> / 50
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('#msg').bind('input propertychange', function() {
// 获取输入文本的字数
var textNum = $(this).val().length;
$('.textNum').text(textNum);
if (textNum >= 50) { // 如果大于50
alert('最多输入50个字')
}
})
</script>
</body>