如何在JavaScript中创建一个输入框？

吴欣
3,655 阅读3分钟

JavaScript是世界上最著名的编程语言之一，有助于创建动态和互动的网络应用程序。像其他动态语言一样，从用户那里读取、保存、处理和输出数据是必须的。

当你需要处理用户数据而不把它送回服务器时，Javascript是非常有益的。与把所有东西送到服务器上处理相比，JavaScript的速度要快得多，但你必须能够接收用户的输入，并使用适当的语法对其进行操作。本教程的重点是获取用户输入并使用HTML元素或提示在屏幕上显示。

方法一：使用提示语

为了与用户建立联系，Javascript为我们提供了一些窗口对象方法，其中一个是prompt()方法。prompt()方法的基本功能是显示一个对话框并接受用户的输入。prompt()方法最常用于存储/保存关于用户的少量信息，当开发者希望用户在继续浏览网页之前输入数据时，最常使用该方法。

语法

prompt(text, default)

prompt()方法需要两个参数：第一个是文本 参数，它出现在对话框中；第二个是默认 参数，它是显示在提示输入框中的默认文本。这些选项都是可选的，可以留空。

prompt()方法示例

var name = prompt("Enter your name", "Enter name");
if (name != null) {
  alert("Hello! "+ name)
}

在上面的JavaScript代码中，我们调用了prompt()方法，要求用户输入他的名字。默认值将是Enter name。

让我们去掉Enter name，然后输入你的名字。

现在当你点击OK按钮时，你会看到Hello!Nas的消息提示。

方法2：HTML和JavaScript

另一种在Javascript中创建输入框的方法是使用一个HTML输入框，然后在JavaScript中引用它并获得它的值。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>Create Input Box</h3>
    <input type="text" id="myName" placeholder="Enter Name">
    <button id="btn">Save</button>
    <script src="code.js"></script>
</body>
</html>

在上面的代码中，首先，我们定义了一个输入框，然后是一个带有 "保存"字样的按钮。然后我们用script标签引用了code.js文件。在code.js文件中，我们所有的javascript代码都会出现。

JavaScript。

const btn= document.getElementById("btn");

btn.addEventListener('click', function(){
  var name = document.getElementById("myName").value;
  alert("Name: "+ name);
});

在上面的代码中，我们从html中引用了id为btn 的按钮，然后给它添加了一个click的事件监听器，它将持续监听，当有人点击保存按钮时，将运行一个函数。在这个函数中，首先，我们使用给定的id，即myName，获得输入框的值。然后我们提醒这个值。

总结

JavaScript是一种编程语言，它的用户群与日俱增，这是正确的，因为它是一种使我们的网页具有交互性的编程语言。JavaScript为我们提供了与用户互动的机会，它接受用户的输入，然后保存该输入或显示该输入。

在这篇文章中，我们使用两种方法（即prompt()方法和引用 HTML 中的输入框）来获取用户的输入并显示该输入。

avatar
文章
阅读
粉丝