JS簡單獲取并修改input文本框內容的方法示例
更新時間：2018年04月08日 11:52:13 作者：chengqiuming
這篇文章主要介紹了JS簡單獲取并修改input文本框內容的方法,結合實例形式分析了JavaScript針對頁面元素的獲取、賦值等相關操作技巧,需要的朋友可以參考下
本文實例講述了JS簡單獲取并修改input文本框內容的方法。分享給大家供大家參考，具體如下：
一 介紹
獲取文本框并修改其內容可以使用getElementById()方法來實現。
getElementById()方法可以通過指定的id來獲取HTML標記，并將其返回。
語法：
sElement=document.getElementById(id)
sElement：用來接收該方法返回的一個對象。
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.dbjr.com.cn 獲取文本框并修改其內容</title>
</head>
<body>
<script language="javascript">
<!--
function c1()
{
var t=document.getElementById("txt");
t.value="www.dbjr.com.cn 修改文本內容"
}
-->
</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程序設計有所幫助。
相關文章
在JavaScript中，函數的功能十分強大，除了函數相關的基礎知識外，掌握一些高級函數并應用起來，不僅能讓JS代碼看起來更為精簡，還可以提升性能，本文是小編總結的一些常用的、重要的函數2018-01-01
這篇文章主要介紹了在JS中如何解析HTML字符串,需要的朋友可以參考下2014-04-04
這篇文章主要為大家介紹了JavaScript操作元素，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
微信小程序使用map組件實現檢索(定位位置)周邊的POI功能示例
這篇文章主要介紹了微信小程序使用map組件實現檢索(定位位置)周邊的POI功能,涉及微信小程序基于map組件與高德地圖PAI接口的定位操作相關使用技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了JS實現的表格操作類,可實現針對表格的添加,刪除,排序,上移,下移等操作,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
這篇文章主要給大家介紹了關于JavaScript中常用的幾種字符串方法的相關資料，文中通過圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
下面小編就為大家?guī)硪黄狫avaScript使用atan2來繪制箭頭和曲線的實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家介紹了JavaScript中的聲明提升實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
使用Three.js?實現虎年春節(jié)3D創(chuàng)意頁面
虎年春節(jié)將至，本文使用?React?+?Three.js技術棧，實現趣味?3D創(chuàng)意頁面，主要包括：ShadowMaterial、?MeshPhongMaterial等基本材質的使用、使用?LoadingManager展示模型加載進度、OrbitControls`的緩動動畫、TWEEN簡單補間動畫效果等，感興趣的朋友一起看看吧2022-01-01
做過微信開發(fā)的都知道，在部分android機型里微信不支持網頁上傳圖片的，這是由于這些機型的文件上傳存在內存泄漏，會導致微信閃退，所以微信內置瀏覽器將文件上傳屏蔽，本篇文章給大家介紹使用微信jssdk如何上傳圖片，需要的朋友可以關注下2015-08-08