JavaScript 使用 getElementById 获取与修改 Input 文本框内容

JavaScript 获取与修改 Input 文本框内容方法

本文介绍一种通过JavaScript获取并修改input文本框内容的基础方法，供读者参考学习。

方法介绍

一、方法介绍

要实现获取文本框对象并修改其内容，可以使用getElementById()方法。

getElementById()方法能够根据指定的id属性值查找对应的HTML元素，并返回该元素的引用对象。

语法说明如下：

sElement=document.getElementById(id)

sElement：用于接收该方法返回的DOM对象引用。

id：指定需要获取的HTML元素的唯一标识符（id属性值）。

应用场景

二、应用场景

获取文本框并修改其内容

页面加载完成后，文本框默认显示“初始文本内容”。当用户点击按钮时，将触发事件处理函数，从而改变文本框中的显示内容。

代码实现

三、代码实现

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net 获取文本框并修改其内容</title>
</head>
<body>
<script language="javascript">
 <!--
 function c1()
 {
 var t=document.getElementById("txt");
 t.value="www.jb51.net 修改文本内容"
 }
 -->
</script>
<input type="text" id="txt" value="初始文本内容" size="30"/>
<input type="button" value="更改文本内容" name="btn" onclick="c1();" />
</body>
</html>

运行结果

四、运行结果

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。