Question

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

我要做的是使放大镜可点击以提交表格。

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

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

Answer 1

制作背景图片触发表单提交并不漂亮。

更好的方法是在输入之外放置一个常规提交按钮，然后设置样式以使其看起来像按钮在里面。这也将保留可访问性（例如，盲人用户将能够使用您的网站），按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>

Answer 2

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

jsfiddle

jsfiddle with tick box

我不喜欢当前答案的美学，任何人都到这里寻找使用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>

为图标添加处理程序以使提交操作按需进行，但这超出了此问题的范围......

Answer 3

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

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

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)" />

Answer 4

只需将放大镜的输入类型=“图像”和上面的z-index，位置：绝对，然后用边距移动它。

Answer 5

这可能看起来有点矫枉过正，但它适用于我的应用程序。

这是我的解决方案：

;(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" />

从这里您可以轻松地挂钩锚定点击事件或只是将其更改为提交按钮

输入字段内的可点击图标

5 个答案:

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