在线excel-使用可嵌入您系统的在线Excel：SpreadJS -制作票据金额输入框

前言 | 问题背景

本例是由一位用户提出的实际需求。在类似金额的票据中，一个单元格仅允许填写一位数字，每一个单元格都对应着一个数字位，例如千位、万位、百位等。

据此需求进行分析，可知需要实现以下几点基本操作：

1. 需要把对应表格区域保护并锁定，不能直接允许用户编辑单元格内容，否则不能保证用户仅输入一位数字；
2. 需要针对键盘事件进行监听，通过事件代码为单元格赋值，过滤掉除数字外的其它字符；
3. 在一个单元格填写完毕后，活动单元格自动后移到下一个单元格上，不需要鼠标点选或键盘切换。

本文内容基于SpreadJS V12版本

示例代码分析

由以上分析可知，首先需要对表单进行保护设置，同时设置一下样式和表头，如下所示：

键盘事件需要绑定到div上，先进行字符过滤，再执行填值和移动单元格操作。如下所示：

需要完整示例及源码请自行搜索或点击本文扩展链接获取。

补充讨论

本例仅仅展示了最基础的实现思路，仍有很多没有完善的地方，由于篇幅因素，仅在此处进行讨论补充一下。例如：在用户填写错误时，如何撤销或删除？当页面上还有其他数据区域时，如何做到自动后移单元格不会超出金额区域？这些问题大家可以思考补充，欢迎讨论。

关于葡萄城

赋能开发者！葡萄城公司成立于 1980 年，是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构，面向全球市场提供软件研发服务，并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣，在全球被数十万家企业、学校和政府机构广泛应用。