我有一个搜索输入字段，框内有一个放大镜作为背景图像。
我想要做的是使放大镜可点击以提交表单。
图标位于字段右侧的文本输入字段内。
如果有帮助，该网站使用 jquery 和蓝图 css 框架。
【问题讨论】：
标签： javascript jquery html css
让背景图片触发表单提交并不漂亮。
更好的方法是在输入外部放置一个常规提交按钮，然后设置样式以使其看起来像按钮在里面。这也将保留可访问性（例如，盲人用户将能够使用您的网站），并且按 Enter 将在所有浏览器中自动提交您的表单。
请参阅下面的代码，或查看this jsFiddle 以获得有效的概念验证。
<style type="text/css">
.search_field {
display: inline-block;
border: 1px inset #ccc;
}
.search_field input {
border: none;
padding: 0;
}
.search_field button {
border: none;
background: none;
}
</style>
<div class="search_field">
<input name="q" />
<button type="submit"><img src="magnifying_glass.png" alt="Search" /></button>
</div>
【讨论】：
我不喜欢当前答案的美感，任何到达这里的人都在寻找使用 bootstrap 或 font-awesome（或您自己的 SVG 图形）的解决方案。
该示例在没有引导程序的情况下工作，但是搜索符号的字体图标将不存在。
css
html {
/* to make rem sizes behave */
font-size: 10px;
}
.input-with-icon {
/* causes absolute icon div to be positioned correctly */
position: relative;
width: 25rem;
height: 3.2rem;
box-sizing: border-box;
}
.input-with-icon .form-control {
height: 100%;
width: 100%;
padding-right: 3.65rem;
box-sizing: border-box;
}
.input-with-icon .icon {
position: absolute;
/* These are set relative to the height of the input box to bound the box neatly inside. This is aesthetic to me but you may change the dimensions of course. */
right: 0.3rem;
top: 0.3rem;
width: 2.6rem;
height: 2.6rem;
border-radius: 0.3rem;
/* content in the icon div is centered, without bootstrap or font-awesome you may wish to add your own text in the span */
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
html
<div class="input-with-icon">
<input type="text" class="form-control" value="thing">
<div class="btn btn-default icon"><span class="glyphicon glyphicon-search"></span>
</div>
</div>
为图标添加一个处理程序以根据需要执行提交操作，但这超出了此问题的范围...
【讨论】：
只需输入一个放大镜的 type="image" 并在其上方进行 z-index，位置：绝对，然后将其移动到边距。
【讨论】：
您不能只在输入字段中的背景图像的一部分上添加点击事件。
但是，您可以在输入文本字段上使用单击事件，并根据单击发生时鼠标的位置进行计算，如果单击确实是在背景图像的大部分区域，但这非常复杂并且位置鼠标与输入文本的比较在不同的浏览器中会有所不同。
PS：接下来我要做的是用图像设计输入字段。例如，查看此输入字段进行搜索：http://www.gamefront.com/
[编辑] 这是一个示例，仅使用 Mozilla 进行了测试。正如我之前所说，您需要使用像素（distanceFromTop、distanceFromLeft、inputWidth、inputHeight、pictureWitdh）来找到好位置：http://pastebin.com/00rWTadz
<script type="text/javascript">
var tempX = 0;
var tempY = 0;
document.onmousemove = getMouseXY;
function getMouseXY(e) {
tempX = e.pageX;
tempY = e.pageY;
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
document.getElementById('MouseX').value = tempX;
document.getElementById('MouseY').value = tempY;
return true;
}
function search(){
// position of input field
var distanceFromTop = 60;
var distanceFromLeft = 8;
// size of input field
var inputWidth = 204;
var inputHeight = 20;
// size of picture
var pictureWitdh = 20;
// dont need to check mouse position on axis y
// because onclick event already is on input field
// check mouse position on axis x
if(tempX > (distanceFromLeft+inputWidth-pictureWitdh)){
alert('Did click on the right');
}
}
</script>
<input type="text" id="MouseX" value="0" size="4"> X<br>
<input type="text" id="MouseY" value="0" size="4"> Y<br>
<input type="text" id="search" onclick="search(this)" />
【讨论】：
这可能看起来有点矫枉过正，但它适用于我的应用程序。
这是我的解决方案：
;(function($) {
$.fn.inputButton= function() {
return this.each(function() {
$input = $(this);
$input
.css({"padding":"0 25px 0 0"})
.after("<a style=\"margin:0 0 0 -20px;\" href=\"#\">btn</a>")
;
});
};})(jQuery);
然后像任何其他插件一样调用它：
<script type="text/javascript">$('.link').inputButton();</script>
<input class="link" />
从这里您可以轻松地挂接到锚点单击事件或简单地将其更改为提交按钮
【讨论】：