一、直接上效果图
二、直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="fabu">
<input type="text" id="contact" oninput="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">
<p id="counter">0</p>
</div>
<script>
document.getElementById('contact').addEventListener('input', function() {
let count = this.value.replace(/[^\u4e00-\u9fa5]/g, '').length;
document.getElementById('counter').textContent = count;
});
</script>
</body>
</html>
三、功能讲解
此功能比较简单只需要获取当前输入框的值,在获取所输入值的length在将value.length的值渲染到页面上就可以了;
希望可以帮到大家