當INPUT字段有數據時更改DIV背景。怎麼樣？

-2

我有一個div內的輸入字段，我希望div背景在輸入字段中輸入數據時進行更改。當INPUT字段有數據時更改DIV背景。怎麼樣？

這是如何完成的？

2012-04-08 Erik

同時，儘量增加你正在下工作的限制的一些信息。你是否侷限於某個版本的CSS？你是否使用特殊的JavaScript庫，或根本沒有JavaScript庫？ – Hauge 2012-04-08 21:32:26

你可以嘗試使用jQuery來解決這個問題。在您的<head>標記中加載jQuery，並通過在包含jQuery的腳本標記中添加此JavaScript代碼段，將其附加到輸入字段上的keypress事件。

$(document).ready(function() { 
    $("#myInput").keypress(function() { 
     if($("#myInput").val().length > 0) $("#myDiv").css("background-color", "red"); 
    }); 
});

來源

2012-04-08 04:42:26

$('div input').keypress(function() { 
    $(this).val().length > 0) { 
     $(this).parent().css("background-color","red"); 
    } else { 
     $(this).parent().css("background-color","none"); 
    } 
});

如果要善待你的網頁設計師和他們成爲朋友，你也可以動態地應用和刪除類屬性：

$('div input').keypress(function() { 
    $(this).val().length > 0) { 
     $(this).parent().addClass("background"); 
    } else { 
     $(this).parent().removeClass("background"); 
    } 
});

那麼你的設計師可以調整在CSS文件中使用CSS「背景」類鉤子，而不必擔心搞亂了你美麗的JavaScript傑作。它還爲他們提供了更大的靈活性來進行更改，而無需將所有表示邏輯放入業務邏輯代碼中。

/* Example CSS rule */ 
input.background { 
    background-color: red; 
    border-radius: 2px; 
    -webkit-box-shadow: 0 0 6px 4px red; 
}

來源

2012-04-08 04:42:51 jmort253

@ Xander - 謝謝！答案已更新。 – jmort253 2012-04-08 04:46:14

當INPUT字段有數據時更改DIV背景。怎麼樣？

回答

相關問題