如何为JavaScript (数字)制作小键盘

基础概念

JavaScript是一种广泛使用的脚本语言，主要用于网页和网络应用的客户端编程。它允许开发者创建动态内容，响应用户输入，以及与网页上的HTML和CSS进行交互。

类型

在JavaScript中，数字（Number）是一种基本的数据类型，用于表示整数和浮点数。

应用场景

小键盘通常用于输入敏感信息，如密码或PIN码，以提高安全性。在JavaScript中实现小键盘可以应用于网页或移动应用中的表单输入。

实现小键盘的示例代码

以下是一个简单的HTML和JavaScript示例，展示如何创建一个数字小键盘：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字小键盘</title>
<style>
  .keyboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .key {
    padding: 10px;
    text-align: center;
    border: 1px solid #ccc;
    cursor: pointer;
  }
</style>
</head>
<body>

<input type="text" id="inputField" readonly>
<div class="keyboard">
  <div class="key" onclick="appendNumber('1')">1</div>
  <div class="key" onclick="appendNumber('2')">2</div>
  <div class="key" onclick="appendNumber('3')">3</div>
  <div class="key" onclick="appendNumber('4')">4</div>
  <div class="key" onclick="appendNumber('5')">5</div>
  <div class="key" onclick="appendNumber('6')">6</div>
  <div class="key" onclick="appendNumber('7')">7</div>
  <div class="key" onclick="appendNumber('8')">8</div>
  <div class="key" onclick="appendNumber('9')">9</div>
  <div class="key" onclick="clearInput()">C</div>
  <div class="key" onclick="appendNumber('0')">0</div>
  <div class="key" onclick="submitInput()">OK</div>
</div>

<script>
  function appendNumber(number) {
    document.getElementById('inputField').value += number;
  }

  function clearInput() {
    document.getElementById('inputField').value = '';
  }

  function submitInput() {
    alert('输入的数字是：' + document.getElementById('inputField').value);
  }
</script>

</body>
</html>

解决问题的思路

HTML结构：创建一个输入框和一个包含数字键的容器。
CSS样式：使用CSS来布局小键盘，使其看起来更美观。
JavaScript逻辑：
- appendNumber函数：将点击的数字追加到输入框中。
- clearInput函数：清空输入框中的内容。
- submitInput函数：提交输入的内容并进行处理（例如弹出一个提示框）。

参考链接

通过上述示例代码和解释，你可以创建一个简单的数字小键盘，并应用于JavaScript项目中。

如何为JavaScript (数字)制作小键盘

、

我在https://khanacademy.org上的JavaScript编辑器上做了一个数字分析器。我想让它成为我分析的变量，这样就可以在不改变代码的情况下改变它。我认为最好的方法是做一个数字为0-9的键盘。唯一的问题是，当我为1和2创建一个按钮并同时按下这两个按钮时，theNumber变量变成了3而不是12。我能以某种方式解决这个问题吗？

浏览 18提问于2020-07-29得票数 0

回答已采纳

1回答

使用修饰符时的VT100数字键盘转义代码(ctrl/shift/alt)

、、、

代码可以在这里找到 { "k9", "\033Oy", NULL }, 现在我想对带有不同修饰符(ctrl，alt，shift)的数字键盘键做同样的事情

浏览 1提问于2019-11-07得票数 0

2回答

如何在android中使用自定义键盘应用程序编辑文本

我正在做一个需要特殊键盘的应用程序，我可以通过按键将文本转换为编辑文本。private static final String TAG = SecondActivity.class.getName();private InputMethodManager imm;private Str

浏览 4提问于2012-12-19得票数 3

5回答

如何在手机浏览器中只显示数字键盘以及最大长度和不允许键盘特殊字符？

、、、

我有几个字段，我需要数字键盘来显示在移动浏览器中。 <input type="tel">显示小键盘，但随之而来的是特殊字符，如()、p、w+等。因为没有最大长度支持:如果用户输入了太多的字符，则会进行验证，但由于输入大小较小，删除较大的数字将变得乏味。

浏览 13提问于2017-09-20得票数 0

1回答

将数字数组转换为键，后面跟着匹配键的索引

对JavaScript来说是新手。我正在尝试转换一个数字数组进入以键作为数组中的数字的对象数组中，后面跟着出现数字的索引数组，如我看到了reduce的几个例子，但我不明白如何为给定的键创建条目数组。

浏览 1提问于2021-09-20得票数 1

回答已采纳

1回答

Javascript调整图像大小以在上传到服务器之前减小其大小？

、、、

我正在制作一个网站，上传来自浏览器的图像，并将它们存储在服务器上。然而，一些图像真的很重，我想调整它们的大小，使其在大小上没有太大的变化，主要是为了减少所有存储的图像的大小。我想使用浏览器代码中可用的工具(不想安装库并将所有的javascript代码捆绑到客户端) 我可以在服务器上调整它们的大小，但不想在服务器上使用更多的计算能力。

浏览 14提问于2020-03-29得票数 0

回答已采纳

1回答

如何为数字输入创建Html.EditorFor

、

很简单，我想构建一个只接受数字的编辑器，就像我做的那样，你可以在更改时使用javascript吗？

浏览 2提问于2011-11-09得票数 0

回答已采纳

2回答

React Native中的数字格式

、

如何将本机基本输入格式化为只接受数字，并将其格式化为美元格式？onChangeText={(text) => this.onChangeText(text, 'Total')}/> 它是有效的，但我如何才能更改为只接受数字和带有美元符号的格式

浏览 2提问于2019-07-17得票数 1

1回答

我想创建一个4个字符的自定义密码条目，如iPhone锁屏页面。它将有一个定制的键盘小键盘，但这不是问题所在。我有4个盒子的大头针进入，每个盒子是分开的，并有自己的自定义设计。然而，我真的不确定如何将所有这些链接在一起，以便当我在第一个框中输入数字时，它会自动前进到下一个框，以便我可以键入下一个数字。在输入最后一个数字后，它应该自动检查密码是否正确，如果正确，则执行一些操作。做这件事最好的方法是什么？

浏览 1提问于2011-08-31得票数 0

2回答

Android键盘类型

、

当用户点击编辑文本时，是否可以在android中使用此键盘？这个键盘需要先出现。我使用了不同的输入类型，但是我没有得到我附加的类型。

浏览 5提问于2013-05-15得票数 0

回答已采纳

1回答

从JSF设置HTML5输入模式(Primefaces)

、、、

但是，此组件不支持HTML5 pattern属性，因此不会导致出现iOS数字键盘。我希望结果输出看起来有点像我曾尝试使用javascript在页面加载时编写模式属性，但无法正常工作(例如)干杯，艾德。

浏览 0提问于2013-07-08得票数 3

2回答

基于jQuery的输入框阴影

、

如何为输入框制作阴影背景，如(向下滚动一点)，使用jQuery或CSS？编辑：我不想用图像作为背景。

浏览 2提问于2011-07-24得票数 0

回答已采纳

1回答

如何为asp.net制作一个数字下位控件？

、、

有没有人知道如何为asp创建一个数字向下的控件。有一个用于制作winforms，但我不知道是否有一个用于制作webforms。有什么我可以用的吗？

浏览 6提问于2008-11-04得票数 2

回答已采纳

3回答

向表格单元格中添加数组元素

、、、

cell.appendChild(document.createTextNode(myArray));}; 我正在用纯Javascript制作一个内存游戏，这是我想出的生成游戏板的代码，一个带有4x4单元的表。我有一个由16个随机生成的数字组成的数组(每个数字中有1个paif )，并希望在每个单元格中放置一个数字，但是我无法设法解决如何为其编写代码。

浏览 6提问于2013-12-10得票数 0

回答已采纳

1回答

如果iMacros中没有刷新，则选中复选框

、、、、

我试着为页面做一个脚本，我所需要的只是简单的java脚本，如果页面上有一个文本的例子-没有找到的宏应该点击按钮查找工作。宏必须按下按钮，在1秒内找到工作。对不起我的英语

浏览 1提问于2013-02-24得票数 0

2回答

将dust.js模板编译到html服务器端？

、

我尝试过dusty和dustc服务器端编译器，但是它们生成一个javascript文件，它将在页面上写入模板的内容。

浏览 1提问于2013-10-15得票数 0

回答已采纳

1回答

不需要的唯一HTML ID

当使用drupal_render(drupal_get_form('user_register_form'))时，它是对用户名和电子邮件字段使用HTML，如edit-name--6和edit-mail-有一些老代码是以edit-name和edit-mail为目标的JavaScript。如果没有破折号和数字，我如何才能输出edit-...呢？或者如何为这些字段指定自定义HTML ID？

浏览 0提问于2017-08-23得票数 -1

回答已采纳

1回答

R中的多重栅格盒

、、、

我试着制作一个有14个不同光栅的盒子图的数字。每个栅格表示给定100米海拔范围的雪深度表面，范围为1300-2600马塞尔。我知道如何为每个栅格单独制作一个盒子图，但我想不出如何把所有的14张都画在同一个数字上。这将是理想的跳过转换栅格到ASCII网格，因为以前曾向我建议。任何帮助都是非常感谢的！

浏览 2提问于2016-10-03得票数 0

回答已采纳

1回答

如何为数字海洋中的多种环境配置圆环CI或Jenkins

、、、

我们制作了一个应用程序，我们在不同的数字水滴上部署了生产分支、测试分支、开发分支。但我想为他们设置CD使用Jenkins或循环CI (无论哪一个会更容易和更好)。如何为所有这些分支创建CD环境，是否需要为每个分支分别设置？例如，如果我使用Jenkins来设置CD管道，那么是否需要分别为dev、uat和prod环境设置Jenkins？我对此感到非常困惑，请让我知道如何为数字海洋液滴上的所有分支建立合适的CD环境。

浏览 7提问于2022-07-08得票数 0

1回答