在浏览器中，要获取用户的输入是一个很常见的需求，Webpack处理表单的过程是使人感到痛苦和厌恶的。好在，有一个内置的方法叫做 window.prompt，可以通过使用这个方法轻松地获取用户的输入。

window.prompt是JavaScript的内置方法之一：它用于在浏览器中显示消息，并提示用户通过输入框提供响应。window.prompt方法接受两个参数：一个是消息，另一个则是默认值。

请注意，这个对话框最好不要在网站上进行过多的使用，因为它可能会影响您的网站的整体体验、性能和可访问性。而且，window.prompt在移动设备上不能正常工作，也不适用于适用于不能正常工作JS代码的环境。

现在，我们让我们一步步来看一下如何使用window.prompt获取用户的输入。

第一步：使用window.prompt显示一个消息框

首先，我们先来创建一个HTML文档，以及一个JavaScript代码，用于在浏览器中显示消息并提示用户输入响应。首先，创建一个新的HTML文档，如下所示：

```html

```

现在，我们要在JavaScript代码中创建一个消息框，如下所示：

```JavaScript

alert("Hello, please give your name!");

```

在这个例子中，我们打开了一个消息框，并向用户问好，然后请求他们的名字。运行这个代码，我们将看到一个简单的消息提示框弹出，如下图所示：

[](https://blog.kaka99.site/media/image/Get-User-Input-in-Browser-with-window.prompt/alert-hi.png)

第二步：使用window.prompt获取用户输入

使用window.prompt方法，用户在浏览器中的输入将使用对话框进行。为了进行交互，我们需要使用JavaScript代码调用window.prompt()方法，并将消息和默认值传递给它。例如，在下面的代码中，我们将使用window.prompt方法获取用户的名字：

```JavaScript

var name = window.prompt("Please enter your name", "Anonymous");

```

此行代码中，我们没有仅向用户请求对话框中必要的信息，而且通过可选的“默认值”参数为对话框提供了一个预填充值（如果用户不输入任何值，将使用这个默认值）。运行这个代码，我们将看到一个窗口，要求用户提供他们的名字，如下所示：

[](https://blog.kaka99.site/media/image/Get-User-Input-in-Browser-with-window.prompt/prompt.png)

用户输入了他们的名字，然后点击“OK”按钮，输入将保存在我们指定的变量“name”中。

第三步：显示输出

最后，要得到用户输入，只需将变量“name”显示为一个代表输入文本的字符串即可。例如，在下面的代码中，我们将使用alert函数来显示用户输入：

```JavaScript

alert("Welcome " + name + "!");

```

现在，我们已经成功地将用户输入的文本保存到变量“name”中，并将这个变量的内容作为字符串的一部分，输出给用户一个欢迎信息。当用户点击“OK”按钮时，您将看到一个包含欢迎信息的弹出消息框，如下所示：

[](https://blog.kaka99.site/media/image/Get-User-Input-in-Browser-with-window.prompt/alert.png)

完整代码示例：

```JavaScript

alert("Hello, please give your name!");

var name = window.prompt("Please enter your name", "Anonymous");

alert("Welcome " + name + "!");

```

这是一个非常简单的例子，可以帮助你了解如何使用window.prompt方法在浏览器中获取用户输入。您可以使用类似的方法来通过网页创建交互，如表单提交或对话框。在实际的项目中使用时，请记住：window.prompt方法不适合用于大规模的应用，因为它的UI体验可能无法满足那些需要更好互动的用户的要求。