如何编码HTML文本框内的图像的单击事件

Question

i have a html text box with an background image as below in asp.net mvc page. an now i want to write click event for that back ground image alone.

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

how can i write click event handler for the background image of the html text box in javascript? if not in javascript any work around to do it?

Answer 1

Wrap the input element within a div, and create an image element, set CSS position: relative; on the parent div, and set position: absolute; on the image, and by specifying the top/left properties of the image, you can position the image to overlay the input. If you want to overlay the input background, you can make the overlay image transparent and assign click event on the transparent image and it should work. Something like:

<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 2

here is how to implement the overlay with 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();
});

if you want to add text selection => add this $('#field').select(); inside mousedown trigger or mouseup

Answer 3

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

It'st not possible this way, because background isn't part of the DOM. You can only acheve this by catching click event of the textarea and then examinating the coordinates of click.