Javascript 输入字段内的可点击图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6933941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clickable icon inside input field
提问by applechief
I have a search input field with a magnifying glass inside the box as a background image.
我有一个搜索输入字段，框内有一个放大镜作为背景图像。
What i'm trying to do is make the magnifying glass clickable to submit the form.
我想要做的是使放大镜可点击以提交表单。
The icon is inside the text input field on the right of the field.
该图标位于字段右侧的文本输入字段内。
If it helps, the site uses jquery and blueprint css framework.
如果有帮助，该站点将使用 jquery 和 blueprint css 框架。
回答by S?ren L?vborg
Making a background-image trigger a form submit is not pretty.
使背景图像触发表单提交并不漂亮。
A better approach is to place a regular submit button outside the input, then style things to make it look like the button is inside. That will also preserve accessibility (e.g. blind users will be able to use your website), and pressing Enter will submit your form automatically across all browsers.
更好的方法是在输入之外放置一个常规提交按钮，然后设置样式以使其看起来像按钮在里面。这也将保持可访问性（例如盲人用户将能够使用您的网站），并且按 Enter 将在所有浏览器中自动提交您的表单。
See the below code, or check out this jsFiddlefor a working proof-of-concept.
请参阅以下代码，或查看此 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>
回答by coderatchet
2017 update CSS3 HTML5 (and optionally bootstrap)
2017 更新 CSS3 HTML5（和可选的引导程序）
I didn't like the aesthetics of the current answer, anyone arriving here looking for a solution using either bootstrap or font-awesome (or your own SVG graphic).
我不喜欢当前答案的美感，任何来到这里寻找使用 bootstrap 或 font-awesome（或您自己的 SVG 图形）的解决方案的人。
The example works without bootstrap, however the font-icon for the search symbol won't be there.
该示例无需引导程序即可工作，但是搜索符号的字体图标将不存在。
css
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
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>
Add a handler for the icon to cause a submit action to occur as desired, this is beyond the scope of this question though...
为图标添加一个处理程序以导致根据需要发生提交操作，但这超出了这个问题的范围......
回答by zzarbi
You cannot add a click event only on a portion of a background image in your input field.
您不能仅在输入字段中的背景图像的一部分上添加单击事件。
However you could use the click event on the input text field and calculate based on the position of the mouse when the click happen, if the click is indeed on the good portion of the background image but that is quite complicate and the position of the mouse compared to the input text will vary in different browser.
但是，您可以在输入文本字段上使用 click 事件并根据单击发生时鼠标的位置进行计算，如果单击确实位于背景图像的良好部分，但这非常复杂并且鼠标的位置相比之下，输入文本在不同浏览器中会有所不同。
PS: What I would do is design the input field with an image next. For instance look at this input field for the search: http://www.gamefront.com/
PS：接下来我要做的是用图像设计输入字段。例如，查看此输入字段进行搜索：http: //www.gamefront.com/
[EDIT] Here a sample, tested just with Mozilla. As I said before you need to play with the pixel (distanceFromTop,distanceFromLeft,inputWidth,inputHeight,pictureWitdh) to find the good spot: http://pastebin.com/00rWTadz
[编辑] 这是一个示例，仅使用 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)" />
回答by sir_thursday
Just make an input type="image" of a magnifying glass and z-index it above, position: absolute, and then move it over with margins.
只需在放大镜上输入 type="image" 并在上面设置 z 索引，位置：绝对，然后将其移动到边距上。
回答by Tricky
This might seem a little overkill but it works in my application.
这似乎有点矫枉过正，但它适用于我的应用程序。
Here's my solution:
这是我的解决方案：
;(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);
then call it like any other plugin:
然后像任何其他插件一样调用它：
<script type="text/javascript">$('.link').inputButton();</script>
<input class="link" />
From here you can easily hook into the anchor click event or simply change it to a submit button
从这里您可以轻松地挂钩锚点点击事件或简单地将其更改为提交按钮
