我有一个带有放大镜图标的搜索输入框，该图标作为背景图片出现在输入框内部。
我的目的是使放大镜图标可点击以提交表单。
该图标位于文本输入框的右侧。
如果有帮助的话，该网站使用了jQuery和Blueprint CSS框架。
我的目的是使放大镜图标可点击以提交表单。
该图标位于文本输入框的右侧。
如果有帮助的话，该网站使用了jQuery和Blueprint CSS框架。
可点击的图标位于输入框内
35
- applechief
2
什么出了问题？你尝试过什么？你能在这里发布一些代码吗？ - Antony Scott
2在我看来，将放大镜图标放在框外作为实际可点击元素会更有意义。然后，您可以使用CSS使其看起来像图标在框内部。为什么您要将其设置为背景图像呢？ - Ant
6个回答
54
将背景图像触发表单提交并不美观。
更好的方法是将常规提交按钮放在输入框外部，然后进行样式设置，使其看起来像按钮在内部。这也将保持可访问性（例如盲人用户将能够使用您的网站），并且按下 Enter 将自动提交您的表单在所有浏览器中。
请参阅以下代码，或查看这个 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>
- Søren Løvborg
7
2017更新 CSS3 HTML5（可选Bootstrap）
我不喜欢当前答案的美学风格，任何想要使用 Bootstrap 或 Font Awesome（或您自己的 SVG 图形）的人都可以在这里找到解决方案。
示例可以在没有 Bootstrap 的情况下运行，但是搜索符号的字体图标将不存在。
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>
需要为图标添加处理程序，以按照所需进行提交操作。然而，这超出了本问题的范围...
- coderatchet
1
只需创建一个输入类型为“image”的放大镜，将其z-index置于顶层，使用绝对定位，并通过设置边距来移动它。
- sir_thursday
1
在输入字段中，您无法仅在背景图像的一部分上添加单击事件。
但是，您可以在输入文本字段上使用单击事件，并根据单击发生时鼠标的位置进行计算，以确定单击是否确实在背景图像的正确部分上，但这相当复杂，并且与输入文本相比，鼠标的位置在不同的浏览器中会有所变化。
附：我会设计一个带有图像的输入字段。例如，查看此搜索输入字段：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)" />
- zzarbi
3
你有计算点击发生在输入字段的哪个位置的示例吗？如果这样不行，我想重新设计它，将图标放在字段旁边。 - applechief
这比仅仅将某些东西放在字段旁边要难得多。 - Ruan Mendes
我只是添加了一个示例。如果你能够自动找到输入字段在页面中的位置，那么你就可以轻松使用这段代码。但是，当你可以用CSS做同样的事情时，那就是很多工作了。 - zzarbi
0
只是另一种方式：
function checkIcon(event){
var e = event || window.event;
var o = e.target;
// Calculate 15% of input width
var d=e.currentTarget.offsetWidth-e.currentTarget.offsetWidth*0.15;
var info='';
// If click on input_width minus 15%
if(e.clientX>=d)
info='CLICKED !!';
document.getElementById('info').innerHTML=info;
}label {
position: relative;
}
label:before {
content: "";
position: absolute;
right: 10px;
top: 0;
bottom: 0;
width: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill-rule='evenodd'%3E%3Cpath d='M16.036 18.455l2.404-2.405 5.586 5.587-2.404 2.404zM8.5 2C12.1 2 15 4.9 15 8.5S12.1 15 8.5 15 2 12.1 2 8.5 4.9 2 8.5 2zm0-2C3.8 0 0 3.8 0 8.5S3.8 17 8.5 17 17 13.2 17 8.5 13.2 0 8.5 0zM15 16a1 1 0 1 1 2 0 1 1 0 1 1-2 0'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
}
input {
padding: 5px 5px;
}<label>
<input type="text" placeholder="Search" onclick="checkIcon()">
</label>
<br><br>
<span id="info"></span>- ddanone
0
这可能看起来有点过分，但在我的应用程序中它是有效的。
这是我的解决方案：
;(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" />
从这里，您可以轻松地钩入锚点点击事件或将其简单更改为提交按钮
- Tricky
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接