如何在html文本框中爲圖像編碼點擊事件

Question

我在asp.net mvc頁面中有一個帶有背景圖像的html文本框。現在我想單獨爲背景圖像寫點擊事件。

 <input type="text" id="txtProjectCode" readonly="readonly" style="background-image:url('/Content/Images/remove.png'); 
background-repeat:no-repeat; 
background-position:right; 
" /> 

我該怎麼寫點擊javascript文本框的背景圖像的事件處理程序？ 如果沒有在JavaScript任何解決辦法做到這一點？

Answer 1

https://stackoverflow.com/que42/css-background-image-onclickstions/96682

It'st不可能這樣，因爲背景不屬於DOM的一部分。您只能通過捕獲textarea的click event並檢查點擊的座標來實現此目的。

Answer 2

一個div內包裹所述輸入元件，並創建一個圖像元素，父DIV設置CSS position: relative;，並在圖像上設置position: absolute;，並通過指定的圖像的top/left屬性，可以定位圖像疊加輸入。如果要疊加輸入背景，可以使疊加圖像透明並在透明圖像上分配單擊事件，並且它應該可以工作。喜歡的東西：

<div style="position: relative;"> 

<input type="text" id="txtProjectCode" readonly="readonly" style="background-image:url('/Content/Images/remove.png'); background-repeat:no-repeat; background-position:right; " /> 
<img src="img.png" style="position: absolute; right: 0;" /> 

</div> 

Answer 3

這裏是如何實現與JS覆蓋：jsfiddle

CSS：

#overlay{ 
    position: absolute; 
    background-color: rgb(255,0,0); 
    opacity:0.2; 
    z-index:5; 
} 
#field{ 
    /*background-image:url('');*/ 
} 

HTML：

<input id="field" type="text" /> 
<div id="overlay"></div> 

JS：

console.log(parseInt($('#field').css('border-width'))); 
var border = parseInt($('#field').css('border')); 
$('#overlay').css({'width':($('#field').width()+2*border)+'px','height':($('#field').height()+3*border)+'px','left':($('#field').offset().left)+'px','top':($('#field').offset().top)+'px'}); 

$('#overlay').click(function(){ 
    console.log('clicked'); 
    $('#field').focus(); 
}).mousedown(function(){ 
    $('#field').mousedown(); 
}).mouseup(function(){ 
    $('#field').mouseup(); 
}); 

，如果你想添加文本選擇=>添加此$('#field').select();鼠標按下觸發內部或鼠標鬆開