如何在input上调用数字键盘

在HTML5中，通常我们会通过JavaScript或者其他UI库来模拟一个数字键盘，以便在`<input>`元素上提供更友好的数字输入体验。下面是一个使用纯JavaScript和CSS的例子：

1. 首先，创建一个包含数字键的HTML结构，并添加CSS样式以显示为弹出式的键盘：

<input type="text" id="numeric-input" />
<div class="numeric-keyboard" style="display:none;">
  <div class="row">
    <button>1</button><button>2</button><button>3</button>
    <!-- ... 重复行结构并添加其他数字 -->
  </div>
</div>

2. JavaScript部分，可以给`<input>`添加点击事件，当用户点击时打开键盘，并在键盘关闭时保存输入值：

document.getElementById('numeric-input').addEventListener('click', function() {
  document.querySelector('.numeric-keyboard').style.display = 'block';
});

document.addEventListener('keyup', function(event) {
  if (event.target === document.querySelector('#numeric-input')) {
    event.target.value = event.target.value.slice(0, -1); // 清除最后一个字符
  }
  if (event.key === 'Escape') { // 按下Esc关闭键盘
    document.querySelector('.numeric-keyboard').style.display = 'none';
  }
});

3. 当用户点击键盘上的数字键时，将对应的数字添加到输入字段中。

请注意，这只是一个基础示例，实际应用可能需要结合Vue、jQuery、原生API或其他前端框架来实现更复杂的功能，例如触碰感应、自动聚焦等。