js 实现输入框功能的封装，并且不失input原生组件能力，限制输入框的字符个数，展示当前已输入几个字符 例如输入了aaaa限制10个字符input后面展示4/10

可以使用以下代码实现输入框功能的封装：

<!-- 在 HTML 中定义输入框和展示区域 -->
<input id="input-box" type="text">
<div id="input-info"></div>

// 在 JavaScript 中获取输入框和展示区域
const inputBox = document.getElementById('input-box');
const inputInfo = document.getElementById('input-info');

// 定义输入框的最大字符个数
const maxLength = 10;

// 监听输入框的输入事件
inputBox.addEventListener('input', () => {
  // 获取输入框中的文本内容
  const text = inputBox.value;

  // 如果输入的字符个数超过最大值，则截取前面的最大值个字符
  if (text.length > maxLength) {
    inputBox.value = text.slice(0, maxLength);
  }

  // 更新展示区域的文本内容
  inputInfo.innerText = `${text.length}/${maxLength}`;
});

这段代码监听输入框的输入事件，在用户输入时判断输入的字符个数是否超过最大值，如果超过则截取前面的最大值个字符，然后更新展示区域的文本内容，展示当前已输入几个字符和最大字符个数。由于使用了原生的输入框组件，所以不会失去其原有的能力。