如何使用jsPDF Library创建仅支持数字的输入字段？

jsPDF本身没有直接提供数字限制的输入字段类型，但可以通过PDF AcroForm的JavaScript事件来实现输入验证，同时为字段添加交互控件。以下是具体实现步骤：

1. 创建基础文本输入字段 #

首先用addField方法创建一个文本类型的输入字段，指定位置和尺寸：

const doc = new jsPDF();
// 参数：字段名、类型、x坐标、y坐标、宽度、高度
doc.addField('numericInput', 'text', 20, 20, 150, 25);

2. 添加实时数字输入限制 #

通过addScript方法为PDF添加内置JavaScript，绑定字段的Keystroke事件，在用户输入时实时过滤非数字内容：

doc.addScript(`
  const numericField = this.getField("numericInput");
  // 按键事件：只允许输入数字（包括退格键）
  numericField.setAction("Keystroke", 
    "event.rc = /^\\d*$/.test(event.change) || event.keyCode === 8;"
  );
`);

这段脚本会在用户输入时检查内容，只有数字或退格键会被允许，其他字符直接拦截。

3. 添加失去焦点时的验证 #

为了确保字段最终内容是有效数字，绑定Validate事件，在字段失去焦点时做二次校验：

doc.addScript(`
  const numericField = this.getField("numericInput");
  // 验证事件：确保内容是纯数字
  numericField.setAction("Validate", 
    "if(!/^\\d+$/.test(event.value)) { event.rc = false; app.alert('请输入有效数字'); }"
  );
`);

如果用户输入了非数字内容（比如通过粘贴），会弹出提示并阻止内容提交。

4. 可选：设置数字格式 #

还可以为字段设置数字格式属性，让阅读器自动识别为数字类型，增强兼容性：

const field = doc.getField('numericInput');
// 设置字段为数字格式，保留0位小数
field.setProperty('format', {
  type: 'number',
  decimalPlaces: 0
});

注意事项 #

• 上述JavaScript是PDF内置脚本，依赖Adobe Acrobat或支持PDF JS的阅读器（部分轻量阅读器可能不支持）。
• 如果需要更复杂的交互（比如限制数字范围），可以扩展Keystroke或Validate事件的脚本逻辑。

内容的提问来源于stack exchange，提问作者Look8