【问题标题】：How to change the keyboard of the prompt input in Javascript?如何更改Javascript中提示输入的键盘？
【发布时间】：2023-01-01 04:55:21
【问题描述】：

我正在编写代码来测试我创建的数学函数。我的代码是这样的：

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title></title>

</head>

  <p></p>

<body>

  <script>

    function Lcos(param) {

      return Math.pow(param * Math.PI, Math.cos(param));

    }

     

    var input = prompt("Enter number", "0");

    

  </script>

</body>

</html>

我已经完成了我创建的函数的代码。我试图用提示代码打印我的功能来测试我的功能。但是代码被打断了。当我输入提示代码时，我希望输入不是使用我的 Android 手机的标准键盘，而是使用 Android 上只能输入数字的数字键盘。因为我写的函数是数学函数，所以用打字键盘输入就显得很可笑了。您可以在 HTML 中执行此操作。您可以通过将 type 属性放在 input 标签中来指定输入键盘。但是提示框是用JavaScript代码写的，不是HTML代码。所以在JavaScript中，我需要以某种方式指定提示框输入的输入键盘。但我不知道如何在 JavaScript 中执行此操作。谁可以给我解释一下这个？

我知道如何在 HTML 中确定输入键盘。但我想在 JavaScript 中执行此操作，但我不知道该怎么做。如果有人能帮助我，我会很高兴。

【问题讨论】：

我不认为这是可能的。 prompt 是一个非常原始的功能。 developer.mozilla.org/en-US/docs/Web/API/Window/prompt

标签： javascript function keyboard

【解决方案1】：

你不能用普通的 Javascript prompt 做到这一点。

但是，您可以使用外部库（如 Sweetalert 或 Bootbox）来实现此目的。诚然，这是一种矫枉过正，但取决于您需要输入的目的，以及它是否是更大应用程序的一部分，这两种方法都可能适合您。

甜心2

使用 Sweetalert2，您可以这样做。

Swal.fire({
  title: 'Please enter a number',
  html: `
    <input id="myNum" type="number" name="myNum" class="swal2-input">
  `,
  icon: 'question',
  showCancelButton: true,
  cancelButtonText: 'Cancel',
  confirmButtonText: 'Ok',
  customClass: {
    container: 'wideLoad',
    popup: 'widePopup',
    actions: 'actionHolder',
    cancelButton: 'btn btn-default pull-left',
    confirmButton: 'btn btn-success pull-right'
  },
  focusConfirm: false,
  preConfirm: function() {
    const myNum = Swal.getPopup().querySelector('#myNum').value;
    if(!myNum.trim() || isNaN(myNum)) {
      Swal.showValidationMessage('That is not a number!');
    }
    return myNum;
  }
}).then((result) => {
  // do something else
});

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

在上面的示例中，我已经这样做了，以便模式在加载时打开。在您的情况下，您可以将其附加到按钮单击或另一个事件。

模态包含带有 type="number" 属性的输入，这将强制数字键盘在移动设备上打开。您还可以设置提示模式的样式，以在键盘弹出后适应屏幕的缩小可视部分。

模态中还包含一些验证：

preConfirm 在用户单击确定按钮后激活。如果不满足您设置的条件，则会触发警告消息

这样做的缺点是你依赖于 jQuery。

开机箱

Bootbox 几乎做同样的事情。但是，与 Sweetalert2 不同的是，您需要包含其他文件 - Bootstrap 的 CSS 和 JS，Bootbox 依赖于它们。

bootbox.prompt({
  title: 'Please enter a number',
  inputType: 'number',
  callback: function(result) {
    // do stuff
  }
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.3/bootbox.min.js" integrity="sha512-U3Q2T60uOxOgtAmm9VEtC3SKGt9ucRbvZ+U3ac/wtvNC+K21Id2dNHzRUC7Z4Rs6dzqgXKr+pCRxx5CyOsnUzg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

【讨论】：