3.12 实现电话拨号键盘

前面简单介绍了如何使用下拉菜单选项的index属性，其实index属性还可以用于控制同级的多个同类控件，比如常见的按钮控件。对于同级的多个按钮控件，可以用index属性作为按钮的索引，以区分多个同级按钮。

下面给出一个通过使用多个同级按钮控件并借助index属性实现电话拨号键盘的JavaScript代码实例。

关于【代码3-13】的说明：

● 第14～25行代码通过一组<button>按钮控件实现了一个电话拨号键盘（包括0～9数字键、“*”键和“#”键）。

● 第26行代码定义了一个文本框（只读），用于显示电话号码。

● 第31行代码定义了一个数组，包含了电话拨号键盘的数字和字符。

● 第32行代码获取了全部<burron>按钮控件的对象集合（arrBtn）。

● 第34～39行代码通过for循环语句遍历了全部按钮控件的对象集合（arrBtn）。其中，第35行代码为每一个按钮对象的index属性定义了索引值（自变量i）；第36～38行代码为每一个按钮对象定义了onclick事件处理方法，用于将用户的拨号操作显示在第26行代码定义的只读文本框中。

下面使用Firefox浏览器运行测试该HTML网页，具体效果如图3.12所示。

图3.12 JavaScript实现电话拨号键盘