如何給html 的input輸入框添加一個icon,並且能夠監聽到icon的點擊事件

要求:
1、input的右邊添加一個自定義icon圖標
2、鼠標放到icon上cursor變成pointer
3、點擊icon能觸發自定義事件。
4、不影響input的使用。
請教各位了。不要貼設置背景圖的icon的回复哦,背景是無法監聽到事件的。

2个回答

这样不久行了?

mochong
莫冲 可以。多謝了
接近 8 年之前 回复
jinnianshilongnian
jinnianshilongnian 可能不跨浏览器 你在chrome上试试 如果可以 可以再改改
接近 8 年之前 回复
jinnianshilongnian
jinnianshilongnian <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> #input{ border: 1px solid #ccc; z-index: 1; float: left; position: absolute; opacity: 1; height: 30px; padding-left: 40px; background:url(glossy_ecommerce_003.png) no-repeat; } #img{ float: left; position: absolute; z-index: 2; padding-left: 2px; cursor:pointer; } </style> <script type="text/javascript"> window.onload=function() { var img = document.getElementById("img"); var input = document.getElementById("input"); function hideImg() { img.style.display='none'; } function showImg() { img.style.display=''; } function doSomething() { alert(123); } input.onfocus = hideImg; input.onblur = showImg; img.onclick=doSomething; } </script> </head> <body> <div> <img id="img" src="glossy_ecommerce_003.png"> <input id="input" type="text"> </div> </body> </html> 图片站内信你了
接近 8 年之前 回复
mochong
莫冲 <div><input id="str" type="password" /><img src="random.png" title="random" style="cursor:pointer;margin-left:-20px;z-index:0;"></div> 這樣可以。
接近 8 年之前 回复
jinnianshilongnian
jinnianshilongnian 哦 。 我试试
接近 8 年之前 回复
mochong
莫冲 icon必須在input裡面。
接近 8 年之前 回复

check this out: http://jsfiddle.net/ZtDSz/1/

Tested in firefox/chrome/ie7/8/9

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐