首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計綜合問答

JavaScript 動態新增列表項後將焦點移至新欄位:修正重複 ID 與 DOM 遍歷

     編輯:程式設計綜合問答

問題描述

在第二個輸入框輸入完畢按下 Enter 後會呼叫 addList() 新增一列,但焦點總是跳回第一列的 weight 輸入框,而不是新增列的欄位。

錯誤原因

程式中所有 weight 輸入框使用相同的 id="weight",HTML 中 id 必須唯一。document.getElementById("weight") 永遠只會回傳第一個匹配元素。

修正做法

  • 移除重複的 id,改用 class 或 name 區別。
  • 在 setfocus() 中透過 DOM 關係找到新增列的第一個輸入框。

程式碼範例

function setfocus(ipt) {
    var tr = ipt.parentNode.parentNode;
    var ipts = tr.getElementsByTagName('input');
    ipts[0].focus();
}

// 在 onkeydown 中呼叫
onkeydown="if(event.keyCode==13) {addList(); setfocus(this); return false; }"
  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved