Javascript 输入字段内的可单击图标

我有一个搜索输入框，框内有一个放大镜作为背景图像

我想做的是让放大镜可以点击来提交表单

图标位于字段右侧的文本输入字段内

---

如果有帮助，该站点将使用jquery和blueprint css框架。

您不能仅在输入字段的背景图像的一部分上添加单击事件

但是，您可以在输入文本字段上使用单击事件，并根据单击发生时鼠标的位置进行计算，前提是单击确实位于背景图像的良好部分，但这非常复杂，并且鼠标相对于输入文本的位置在不同的浏览器中会有所不同

PS：我接下来要做的是用一个图像设计输入字段。例如，查看此输入字段进行搜索：

[编辑]这里是一个示例，仅使用Mozilla进行了测试。正如我之前所说，您需要使用像素（距离顶部、距离左侧、输入宽度、输入宽度、图片宽度）来找到好的点：

var-tempX=0；
var-tempY=0；
document.onmousemove=getMouseXY；
函数getMouseXY（e）{
tempX=e.pageX；
tempY=e.pageY；
//捕捉NS4中可能的负值
如果（tempX<0）{tempX=0}
如果（tempY<0）{tempY=0}
//以名为show的形式显示位置值
//在名为MouseX和MouseY的文本字段中
document.getElementById（'MouseX'）。value=tempX；
document.getElementById（'MouseY'）。value=tempY；
返回true；
}
函数搜索（）{
//输入字段的位置
var distanceFromTop=60；
var distanceFromLeft=8；
//输入字段的大小
var inputWidth=204；
var-inputhweight=20；
//图片大小
var pictureWitdh=20；
//不需要检查鼠标在y轴上的位置
//因为onclick事件已经在输入字段上
//检查鼠标在x轴上的位置
如果（tempX>（距离左侧+输入宽度图片宽度）{
警报（“点击了右边”）；
}
}
X

Y

让背景图像触发表单提交并不完美

一个更好的方法是在输入外部放置一个常规的submit按钮，然后设置样式使其看起来像按钮在内部一样。这也将保留可访问性（例如，盲人用户将能够使用您的网站），按Enter键将在所有浏览器中自动提交表单

请参阅下面的代码，或者查看工作概念证明

<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>

.search_字段{
显示：内联块；
边框：1px插页#ccc；
}
.search_字段输入{
边界：无；
填充：0；
}
.search_字段按钮{
边界：无；
背景：无；
}

只需输入放大镜的type=“image”并在上面对其进行z索引，位置：绝对，然后用边距将其移动。

这似乎有点过分，但它在我的应用程序中起作用

以下是我的解决方案：

;(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);

；（函数（$）{
$.fn.inputButton=函数（）{
返回此值。每个（函数（）{
$input=$（此项）；
$input
.css（{“padding”：“0 25px 0”}）
.在（“”）之后
;
});
}；}（jQuery）；

然后像其他插件一样调用它：

<script type="text/javascript">$('.link').inputButton();</script>
<input class="link" />

$（'.link'）.inputButton（）；

从这里，您可以轻松地挂接到锚点击事件，或者简单地将其更改为提交按钮

2017更新CSS3 HTML5（以及可选的引导）

我不喜欢当前答案的美感，任何来到这里寻找使用引导或字体真棒（或您自己的SVG图形）的解决方案的人

该示例在没有引导的情况下工作，但是搜索符号的字体图标将不在那里

css

html

---

为图标添加一个处理程序，以使提交操作按需发生，这超出了此问题的范围，但…

有什么不起作用？你试过什么？你能在这里发布一些代码吗？在我看来，把放大镜图标作为一个实际的可点击元素放在盒子外面会更有意义。然后，您可以使用css使其显示为图标位于框内。你为什么要把它作为背景图像？你有没有一个例子来说明如何计算点击发生在输入字段的哪个位置？如果这不起作用，我想我会用字段旁边的图标重新设计它。这比在字段旁边放一些东西要困难得多。我只是添加了一个示例。如果您找到一种方法来自动找到输入字段在页面中的位置，您将能够轻松地使用该代码。但是，当你可以用css做同样的事情时，这需要做很多工作。

<script type="text/javascript">$('.link').inputButton();</script>
<input class="link" />

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;
}

<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>