Javascript亮點效果沒有onclick

有沒有辦法改變div背景顏色（突出顯示）而無需在每次輸入onclick中調用該函數？Javascript亮點效果沒有onclick

這裏是我的JavaScript函數：

<script type="text/javascript"> 
function highlight(element) { 
    element.parentNode.style.backgroundColor = '#FF9900'; 
} 
function removeHighlight(element) { 
    element.parentNode.style.backgroundColor = ''; 
} 
</script>

這裏是HTML：

<div class="form-item"> 
<label>Title:</label> 
<input class="form-text Title" 
     type="text" 
     onblur="removeHighlight(this);" 
     onfocus="this.value='';highlight(this);" 
     onselect="this.value='';" 
     onclick="this.value='';highlight(this);" 
     value="english" 
     name="Title"> 
<input class="form-text translations" 
     type="text" 
     onselect="this.value='';" 
     onclick="this.value='';" 
     value="translate" 
     name="title_translate"> 
</div>

這裏我的onclick或ONSELECT調用每個輸入的功能，有時與其他JavaScript衝突功能在我的頁面上。

來源

2011-06-04 ALY

你可以匿名它綁定到特定的元素：

document.getElementById('foo').onclick = function() { 
    this.parentNode.style.backgroundColor = '#FF9900'; 
}

但隨後你將被迫使用id（比寫相同onclick碼20倍更好）。

如果你是使用JavaScript庫如jQuery，這個代碼可以簡化不少：

$('div.form-item input').select(function() { 
    $(this).parent().css('background-color', '#FF9900'); 
}); 

$('div.form-item input').blur(function() { 
    $(this).parent().css('background-color', 'auto'); 
});

，將採取的照顧所有的<div>內<input>元素。 HTML中不需要任何東西。這一切都在JS端完成。

來源

2011-06-04 15:27:34 Blender

但是像這樣，他需要爲每個輸入元素編寫這個事件附件！ – 2011-06-04 15:29:16

您可以遍歷元素（不知何故，如果它們共享一個公共類）並以這種方式應用該處理程序。我也發佈了一個jQuery解決方案，以顯示它是多麼容易。 – Blender 2011-06-04 15:30:57

那麼，他可以將這個想法與一個自定義的[GetElementByClass]（http://www.actiononline.biz/web/code/how-to-getelementsbyclass-in-javascript-the-code/）混合並在表單中使用它-text' – Lucas 2011-06-04 15:33:01

Javascript亮點效果沒有onclick

回答

相關問題