HTML 使用纯Javascript创建一个输入框

在本文中，我们将介绍如何使用纯Javascript来创建一个输入框。HTML的输入框是非常常见和重要的元素，它可以让用户输入各种类型的数据。

阅读更多：HTML 教程

创建HTML结构

首先，在HTML中创建一个容器，用于容纳输入框。可以使用一个div元素作为容器，并为其添加一个唯一的id属性，以便在Javascript中使用。

<div id="inputContainer"></div>

使用Javascript创建输入框

接下来，我们使用Javascript来动态创建输入框，并将其添加到先前创建的容器中。Javascript提供了document.createElement()方法来创建一个指定类型的HTML元素。

// 获取容器元素
var container = document.getElementById('inputContainer');

// 创建输入框
var inputField = document.createElement('input');

// 设置输入框的属性
inputField.type = 'text';
inputField.placeholder = '请输入内容';

// 将输入框添加到容器中
container.appendChild(inputField);

在上述代码中，我们首先通过getElementById()方法获取了容器元素，然后使用createElement()方法创建了一个名为inputField的输入框元素。接着，我们使用了inputField的属性来设置输入框的类型和占位符。最后，我们通过appendChild()方法将输入框添加到容器中。

添加样式和事件

创建完输入框后，我们可以使用Javascript来添加样式和事件。可以使用inputField的style属性来设置输入框的样式，以及addEventListener()方法来为输入框添加事件监听器。

// 设置输入框的样式
inputField.style.width = '200px';
inputField.style.padding = '10px';
inputField.style.fontSize = '16px';

// 添加事件监听器
inputField.addEventListener('input', function(event) {
  console.log("输入框的值为：" + event.target.value);
});

在上述代码中，我们使用了输入框的style属性来设置宽度、内边距和字体大小等样式。然后，我们使用addEventListener()方法为输入框添加了一个’input’事件监听器，当输入框的值发生变化时，将会触发这个监听器，并将输入框的值打印到控制台。

完整示例代码

下面是一个完整的示例代码，演示了如何使用纯Javascript来创建一个输入框，并设置样式和事件。

<!DOCTYPE html>
<html>
<head>
  <title>创建输入框</title>
</head>
<body>

  <div id="inputContainer"></div>

  <script>
    var container = document.getElementById('inputContainer');
    var inputField = document.createElement('input');
    inputField.type = 'text';
    inputField.placeholder = '请输入内容';
    container.appendChild(inputField);

    inputField.style.width = '200px';
    inputField.style.padding = '10px';
    inputField.style.fontSize = '16px';

    inputField.addEventListener('input', function(event) {
      console.log("输入框的值为：" + event.target.value);
    });
  </script>

</body>
</html>