如何在onfocus時更改文本框的背景顏色？

Question

我想這代碼，但它不工作..當我在焦點上的文本框就顯示錯誤

function ChangeBgColor(obj, evt) 
    { 
      if(evt.type=="focus") 
       style.background ="lightgrey"; 
      else if(evt.type=="blur") 
      { 
       style.background="white"; 
      }   
    } 

Answer 1

什麼是style？你有沒有在你的代碼的任何地方定義它上面：

function ChangeBgColor(obj, evt) 
{ 
    if(evt.type=="focus") 
     style.background ="lightgrey"; //<--what is style? 
    else if(evt.type=="blur") 
    { 
     style.background="white"; 
    }   
} 

我猜測你想要的東西，像

obj.style.background ="lightgrey"; 

而在上面的代碼，簡化

function ChangeBgColor(obj, evt) 
{ 
    obj.style.background = (evt.type=="focus") ? "lightgrey" : "white"; 
} 

最佳答案是使用純CSS。

Answer 2

嘗試用jQuery做。

$('#div').on('focus', function() { 
    $(this).css({background:'blue'}); 
}); 

Answer 3

obj.style.background = "#C8C8C8";

Answer 4

JavaScript是沒有必要爲這個任務，只需使用CSS（:focus因爲IE8支持）

https://developer.mozilla.org/en-US/docs/CSS/:focus

input { background: lightgray; } 
input:focus { background: white; } 

---

只有當這個效果是對於< IE8 t也絕對需要可以使用hen JS（正確包裝在條件註釋中），但即使在這種情況下，也建議避免使用邏輯風格：例如

function ChangeBgColor(obj, evt) { 
    obj.className = (evt.type === "focus") ? "focus" : ""; 
} 

，並使用這種風格

input { background: lightgray; } 

input:focus, 
input.focus { background: white; } 

Answer 5

是的，你應該試試這個JavaScript代碼來改變背景顏色爲這個元素：

var obj = document.getElementById("yourId"); 
    obj.onfocus = function() { 
    obj.style.backgroundColor = 'red'; 
    } 

現在你可以改變任何你想要的顏色