Как скопировать событие click для изображения внутри текстового поля html

Question

У меня есть текстовое поле html с фоновым изображением, как показано ниже на странице asp.net mvc. теперь я хочу написать событие click для этого заднего изображения.

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

Как я могу написать обработчик события click для фонового изображения текстового поля html в javascript? если нет в javascript любой работы вокруг, чтобы сделать это?

Answer 1

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

It'st не представляется возможным этот путь, потому что фон не является частью DOM. Вы можете получить это, поймав click event текстового поля и затем проверив координаты щелчка.

Answer 2

Wrap входного элемента в DIV, и создать элемент изображения, набор CSS position: relative; на родительском DIV и установите 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

вот как реализовать накладку с ЯШ: 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> 

ЯШ:

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