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

Question

我的HTML表單中有很多HTML文本框（超過2個）。 第一次加載HTML頁面時，ID屬性為空。 但是，當用戶單擊文本框時，ID應該是“活動的”。 其他人應該是空的。 當用戶單擊另一個時，前一個文本框的ID應該為空。 新的文本框的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。

Answer 1

您可以使用.focus()來檢測文本框上的焦點事件，以及removeAttr()和.attr()來將id設置為焦點元素：

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

工作演示

Answer 2

您應該使用class屬性而不是id屬性。 因此，您可以執行以下操作：

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

Answer 3

試試這個，這是一個純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>

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

問題描述

3 個解決方案

解決方案1
1 2014-10-10 05:59:00

解決方案2
1 2014-10-10 06:01:27

解決方案3
0 已采納 2014-10-10 06:05:40

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

問題描述

3 個解決方案

解決方案1 1 2014-10-10 05:59:00

解決方案2 1 2014-10-10 06:01:27

解決方案3 0 已采納 2014-10-10 06:05:40

解決方案1
1 2014-10-10 05:59:00

解決方案2
1 2014-10-10 06:01:27

解決方案3
0 已采納 2014-10-10 06:05:40