0

我在 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 中，有什么办法可以解决吗？

4

3 回答 3

1

将 input 元素包裹在一个 div 中，并创建一个 image 元素，position: relative;在父 div 上设置 CSS，并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>
于 2013-07-04T08:35:30.360 回答
0

这里是如何使用 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();在 mousedown 触发器或 mouseup 中添加这个

于 2013-07-04T09:36:01.593 回答
-1

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

这是不可能的，因为背景不是 DOM 的一部分。您只能通过捕获click event文本区域然后检查点击坐标来实现这一点。

于 2013-07-04T08:32:32.950 回答