使用JavaScript切換HTML文本框之間的HTML ID屬性值

我的HTML表單中有HTML文本框（超過2個）的堆棧。當第一次加載HTML頁面時，ID屬性爲空。但是當用戶點擊文本框時，ID應該是「活動的」。其他人應該是空的。當用戶點擊另一個時，以前的文本框的ID應該是空的。新的文本框的id應該是「active」。使用JavaScript切換HTML文本框之間的HTML ID屬性值

<input type="text" name="test" id="active"> 
<input type="text" name="test" id=""> 
<input type="text" name="test" id=""> 
<input type="text" name="test" id=""> 
<input type="text" name="test" id=""> 
<input type="text" name="test" id="">

我該如何使用JavaScript來做到這一點？你能幫我解決這個問題嗎？

感謝和問候， Chiranthaka。

來源

2014-10-10 ChiranSJ

試試這個，這是一個純粹的JavaScript解決方案。

<html> 
<head> 
<script> 
function changeIds(selectedEle) 
{ 
    var elements = document.getElementsByName("test"); 
    for(var index = 0 ; index < elements.length ; index++) 
    { 
     elements[index].id=""; 
    } 
    selectedEle.id="active"; 
} 


</script> 
<body> 
<form id="myForm" > 
    <input type="text" onclick="changeIds(this)" name="test" id="active"> 
    <input type="text" onclick="changeIds(this)" name="test" id=""> 
    <input type="text" onclick="changeIds(this)" name="test" id=""> 
    <input type="text" onclick="changeIds(this)" name="test" id=""> 
    <input type="text" onclick="changeIds(this)" name="test" id=""> 
    <input type="text" onclick="changeIds(this)" name="test" id=""> 
</form> 
</body> 
</html>

來源

2014-10-10 06:05:40

使用過時的'onclick =「」'創建六個'onclick =「changeIds（this）」'看起來不太好。這裏有[addEventListener（）]（http://www.w3schools.com/jsref/met_document_addeventlistener.asp）。 – Regent 2014-10-10 06:11:11

評論中有一點，但您必須掃描所有元素以附加事件偵聽器。以及如果這些元素是以編程方式添加的，那麼這不是一個大問題。 – 2014-10-10 06:15:34

沒有人說它會更快。目的是刪除重複的代碼並從HTML視圖（標記）中刪除JS邏輯。 – Regent 2014-10-10 06:35:23

您可以使用.focus()對文本框檢測焦點事件與removeAttr()和.attr()沿設置id來聚焦元素：

$("[name='test']").focus(function() { 
    $('#active').removeAttr('id'); 
    $(this).attr('id','active'); 
});

Working Demo

來源

2014-10-10 05:59:00

我們只是說使用class而不是ID與'.addClass（）'和'.removeClass（）'將是更合適的方式。 – Regent 2014-10-10 06:00:56

他只將ID保留給一個元素。這種方式ID仍然是唯一的。 – 2014-10-10 06:01:49

我已經刪除了關於唯一ID的評論，但是爲此目的使用ID而不是class的整個想法對我來說看起來「不好」。解決問題的最簡單方法是：是否需要將「活動」添加到另一個元素。或者頁面上具有相同樣式的另一個元素。 – Regent 2014-10-10 06:08:02

您應該使用class屬性，而不是id的屬性。所以你可以這樣做：

var inputs = $('input[type="text"]'); 
inputs.click(function(){ 
    inputs.removeClass(active); 
    $(this).addClass('active'); 
});

來源

2014-10-10 06:01:27

'$（'input [name =「test」]'）'會更精確，但+1。 – Regent 2014-10-10 06:04:40

這是JQuery，但解決了這個問題。 – ChiranSJ 2014-10-10 06:55:11

Mhm你的問題有一個'jQuery'標記;-) – 2014-10-10 06:59:02

使用JavaScript切換HTML文本框之間的HTML ID屬性值

回答

相關問題