0%

input.value 取值狀況

input value 會有取值的狀況,如下文所示:

全域與區域設定 input value 差異

全域設定 input.value 時,如果 HTML 沒有設 value 網頁載入時候會是空值
可參考這個範例

清空 input.value

1
2
3
4
function addTodo() {
var txt = document.querySelector('.text').value;
txt = '';
}

因為 txt 是儲存 input 元素的值
換句話說是新增記憶體 ( 變數 txt) 來存放 document.querySelector('.text').value
並非取得當下的 input 元素的值
所以會建議直接使用 txt.value
因此改為 var txt = document.querySelector('.text');
並用 txt.value 就能清空當下的 input.value

1
2
3
4
function addTodo() {
var txt = document.querySelector('.text');
txt.value = '';
}

限制 input 輸入長度

限制字數可使用 maxlengthtype="number" 是無法使用這個語法,需改為 type="tel"
可參考這篇文章

input 欄位如不輸入內容會是 “” ,如轉為數字則會是 NaN

可參考 stackoverflow 討論
裡面提到沒輸入 value 就會是 ""
但該欄位如果有轉型為 Number
則會得到 NaN