安卓系统 打开number,安卓系统下的数字生成应用概述

最近我在做一个支付页面，用的是jsp和js，这可真是个挑战啊！你知道嘛，我需要在安卓和iOS上展示系统自带的数字键盘，这听起来简单，但实际操作起来可就头疼了。

首先，我尝试了使用`input type=\number\`，这本来是个好主意，但问题来了。在安卓系统上，有些机型在输入小数点“.”时，光标会自动往前跳格，这可真是让人摸不着头脑。后来我发现，如果换成`type=\tel\`，这个问题就能解决。

但是，iOS系统上的问题更让我头疼。我用了正则表达式来限制输入，只能输入数字和两位小数。在安卓和浏览器上，输入1.1.时，都能替换为1.1，但在iOS上，却会全部替换，整个输入框都变成了空白的。

我尝试了各种方法，包括调整正则表达式，但问题依旧。后来我发现，这是`type=\number\`的问题。在iOS上，如果输入两个小数点，系统会认为这不是数字，于是全部替换掉。而`type=\tel\`则能正常操作。

我又尝试将`type`换成`tel`，但问题又来了。在iOS上，使用`tel`类型的输入框，数字键盘是没有小数点的，这显然不符合我的需求。我上网一搜，发现可以通过iOS端替换数字键盘来解决。

但是，这还不是全部。iOS九宫格的数字键盘，小数点“.”、逗号“，”和分号“；”是合并的。在一定的时间段内，点击这三个键的时候，会自动切换。更糟糕的是，这个操作会形成退格的效果。

这可怎么办呢？我决定自己写一个自定义的键盘。这个过程可真不容易，但我最终还是成功了。

现在，让我来给你详细介绍一下这个过程吧。

1. 初始化页面

首先，在页面初始化时，我将`input`的`type`设置为`number`。这样，当`input`获取焦点时，系统键盘就会是数字键盘。

```html

2. 监听输入框内容变化

接下来，我需要监听输入框的内容变化。当输入框的内容发生变化时，我将`input`的`type`设置为`text`。

```javascript

document.getElementById('amount').addEventListener('input', function() {

this.type = 'text';

3. 自定义键盘

我需要写一个自定义的键盘。这个键盘要能够处理小数点、逗号和分号的问题，还要能够实现退格功能。

```javascript

function createCustomKeyboard() {

var keyboard = document.createElement('div');

keyboard.innerHTML = `

1

2

3

.

4

5

6

7

8

9

0

退格

`;

document.body.appendChild(keyboard);

function inputValue(value) {

var input = document.getElementById('amount');

if (value === '退格') {

input.value = input.value.slice(0, -1);

} else {

input.value += value;

4. 处理小数点、逗号和分号

在自定义键盘的`inputValue`函数中，我处理了小数点、逗号和分号的问题。当用户点击这三个键时，我会在输入框中添加相应的字符。

```javascript

function inputValue(value) {

var input = document.getElementById('amount');

if (value === '退格') {

input.value = input.value.slice(0, -1);

} else {

input.value += value;

5. 实现退格功能

在自定义键盘的`inputValue`函数中，我还实现了退格功能。当用户点击“退格”按钮时，我会从输入框中移除最后一个字符。

```javascript

function inputValue(value) {

var input = document.getElementById('amount');

if (value === '退格') {

input.value = input.value.slice(0, -1);

} else {

input.value +=