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

入力要素をdivで囲み、画像要素を作成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 に答える