Javascript 如何为html文本框内的图像编写单击事件代码

在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中为html文本框的背景图像编写单击事件处理程序？ 如果不是在javascript中，有什么解决方法吗？

---

这样做是不可能的，因为背景不是DOM的一部分。您只能通过捕获文本区域的

单击事件

，然后检查单击的坐标来实现这一点。

将输入元素包装在一个div中，并创建一个图像元素，设置CSS

位置：相对，并设置
位置：绝对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>

以下是如何使用js实现覆盖：

css:

html:

如果要添加文本选择=>请添加此
$（“#字段”）。选择（）在mousedown触发器或mouseup内部
我认为这是不可能的。这是可能的，请使用覆盖的映射。我将尝试编写代码并解释它是否有效。您想跟踪输入上的单击，但不在文本块内？但我想知道其目的是什么？我不确定您到底想要什么。但据我所知，我认为您可以为输入设置一个类，然后使用该类获取元素并设置单击事件。这正是我的意思：）+1
#overlay{
    position: absolute;
    background-color: rgb(255,0,0);
    opacity:0.2;
    z-index:5;
}
#field{
    /*background-image:url('');*/
}

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

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();
});