<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.warp {margin: 30px;}
.msg {color: red;height: 30px;}
</style>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
</head>
<body>
<div class="warp">
<input id="1" value="" pattern="请输入.." type="text" />
<div class="msg"></div>
</div>
</body>
<script>
$("#1").on('input propertychange', function(){
$(".msg").html("输入了:" + $(this).val().length + "个字符");
});
</script>
</html>