正文

如何用原生JavaScript轻松更改文本框内容，实例教学帮你快速上手

/0 浏览量
1114

在网页开发中，文本框（<input type="text">）是一个常用的表单元素，用于接收用户的输入。使用原生JavaScript，我们可以轻松地更改文本框的内容。下面，我将通过一个实例教学，帮助你快速上手。

实例：动态更改文本框内容

在这个例子中，我们将创建一个简单的HTML页面，其中包含一个文本框和一个按钮。点击按钮后，文本框的内容将被更改。

HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>更改文本框内容实例</title>
</head>
<body>
    <input type="text" id="myInput" placeholder="点击按钮更改内容...">
    <button onclick="changeInputValue()">点击我</button>

    <script src="script.js"></script>
</body>
</html>

在上面的HTML代码中，我们定义了一个文本框和一个按钮。文本框的id属性设置为myInput，这样我们就可以在JavaScript中通过这个ID来引用它。

JavaScript脚本

接下来，我们需要编写一个JavaScript函数来更改文本框的内容。我们将创建一个名为script.js的文件，并在其中添加以下代码：

function changeInputValue() {
    // 获取文本框元素
    var inputElement = document.getElementById('myInput');
    
    // 设置新的文本内容
    inputElement.value = '内容已更改！';
}

在上面的JavaScript代码中，我们定义了一个名为changeInputValue的函数。这个函数首先使用document.getElementById方法获取文本框元素，然后通过设置value属性来更改其内容。

实现步骤

  1. 将HTML代码保存为.html文件。
  2. 将JavaScript代码保存为script.js文件。
  3. 将两个文件放在同一目录下。
  4. 打开HTML文件，在浏览器中预览效果。

当你点击按钮时，文本框的内容将自动更改为“内容已更改！”。

总结

通过上面的实例，我们可以看到，使用原生JavaScript更改文本框内容非常简单。只需要获取文本框元素，并设置其value属性即可。这个例子是一个很好的起点，你可以根据需要扩展这个功能，例如添加更多的交互或动态效果。

-- 展开阅读全文 --