页面显示如下:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>测试页面1</title>
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<!-- layui -->
<link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all"/>
<link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all"/>
<script src="/js/jquery.min.js"></script>
<script src="/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
function checkLen(obj, maxlength){
if(obj.value.length > maxlength){
obj.value = obj.value.substring(0,maxlength);
}
var curr = obj.value.length;
$("#count").html(curr.toString());
}
</script>
</head>
<body>
<div class="layui-fluid" align="center">
<div class="layui-card">
<div class="layui-card-body layui-text">
<h3>一、textarea解决maxlength的兼容问题</h3>
<textarea name="content" id="addcontent" cols="50" rows="13" onpropertychange="checkLen(this,500);" oninput="checkLen(this,500);" onkeyup="checkLen(this,500);"></textarea>
<div>正文字数: <span id="count" style="color: red;">0</span> 个文字(请勿超过500个字数)</div>
<hr class="layui-border-green">
</div>
</div>
</div>
</body>
</html>