我的目的是使放大镜图标可点击以提交表单。
该图标位于文本输入框的右侧。
如果有帮助的话,该网站使用了jQuery和Blueprint CSS框架。
将背景图像触发表单提交并不美观。
更好的方法是将常规提交按钮放在输入框外部,然后进行样式设置,使其看起来像按钮在内部。这也将保持可访问性(例如盲人用户将能够使用您的网站),并且按下 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>
我不喜欢当前答案的美学风格,任何想要使用 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>
需要为图标添加处理程序,以按照所需进行提交操作。然而,这超出了本问题的范围...
在输入字段中,您无法仅在背景图像的一部分上添加单击事件。
但是,您可以在输入文本字段上使用单击事件,并根据单击发生时鼠标的位置进行计算,以确定单击是否确实在背景图像的正确部分上,但这相当复杂,并且与输入文本相比,鼠标的位置在不同的浏览器中会有所变化。
附:我会设计一个带有图像的输入字段。例如,查看此搜索输入字段: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 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>
这可能看起来有点过分,但在我的应用程序中它是有效的。
这是我的解决方案:
;(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" />
从这里,您可以轻松地钩入锚点点击事件或将其简单更改为提交按钮