在編寫 JavaScript 時,一個非常常見的任務就是通過代碼來為一個輸入框或者文本框賦值。這種情況下,我們通常會使用 JavaScript 中的一些 DOM 方法來完成賦值操作。下面我們將就這個問題詳細的講解。
假設我們有一個文本框:
<input type="text" id="name" name="name" value="" />
如上所示,這是一個類型為“text”的輸入框,輸入框的 ID 是“name”。接下來,我們將通過 JavaScript 來為這個文本框設置默認值。
1. 直接設置 value 屬性
var el = document.getElementById('name'); el.value = 'Hello World!';
在這段代碼中,我們首先獲取了文本框元素,并將其存儲在變量 el 中。接著,我們直接將 value 屬性賦值為“Hello World!”。這樣,當用戶打開頁面時,會發現文本框中已經有了這個默認值。
2. 使用 setAttribute 方法
var el = document.getElementById('name'); el.setAttribute('value', 'Hello World!');
和直接設置 value 屬性類似,我們先獲取文本框元素,并將其存儲在變量 el 中。接著,我們使用 setAttribute 方法來設置文本框的 value 屬性。這和直接設置 value 屬性非常相似,但是這種方式可以在一些特殊情況下更加靈活。
3. 使用 innerHTML 屬性
var el = document.getElementById('name'); el.innerHTML = 'Hello World!';
與之前兩種方法不同,這里使用了 innerHTML 屬性來為文本框設置默認值。但是這種設置方式只能用于一些容器元素,例如 div 元素和 p 元素等,并不能用于 input 元素。所以,這種方式只是為了展示一些與眾不同的方法,通常并不實用。
通過上面的三種方法,我們已經介紹了如何通過 JavaScript 來為一個輸入框或者文本框賦值。最后,需要注意的是,當我們使用這些方法時,需要確保文本框已經被正確的加載到頁面上,否則我們將不能成功的為文本框賦值。