javascript 占位符html中的图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11757196/
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
Image in placeholder html?
提问by Lucas
Can I do something like this with pure html and if needed css and javascript:
我可以用纯 html 做这样的事情吗，如果需要的话，用 css 和 javascript：
And when the mouse focuses, it becomes like this:
而当鼠标聚焦时，就变成了这样：
So I was thinking of an image placeholder. Am I on the right track, or is there a better/more simpler or more straightforward method?
所以我在考虑图像占位符。我是在正确的轨道上，还是有更好/更简单或更直接的方法？
EDIT:Just out of pure curiosity, how would I accomplish this using JavaScript, as all the current answers are all CSS-related?
编辑：出于纯粹的好奇，我将如何使用 JavaScript 完成此操作，因为当前所有的答案都与 CSS 相关？
采纳答案by HaNdTriX
If you only need to support the latest Browser use this:
如果您只需要支持最新的浏览器，请使用：
HTML:
HTML：
<input placeholder="Google Custom Search" type="search" name="q">
CSS:
CSS：
#myInput::-webkit-input-placeholder {
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput::-moz-placeholder {
/* Firefox 19+ */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-moz-placeholder {
/* Firefox 18- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-ms-input-placeholder {
/* IE 10- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
回答by LmC
From my knowledge this is simply CSS background image.
据我所知，这只是 CSS 背景图片。
http://www.w3schools.com/cssref/pr_background-image.asp
http://www.w3schools.com/cssref/pr_background-image.asp
Have it look there, you can accomplish this by setting its position like here: http://www.w3schools.com/cssref/pr_background-position.asp
看看那里，你可以通过设置它的位置来实现这一点：http: //www.w3schools.com/cssref/pr_background-position.asp
You can also change the background image depend on if the item is focused or not simply showing the back ground image when focused and hiding it when its not like:
您还可以根据项目是否聚焦或不聚焦来更改背景图像，仅在聚焦时显示背景图像并在不喜欢时隐藏它：
#item:focus{
bacground image code here
}
More details on focus here: http://www.w3schools.com/cssref/sel_focus.asp
关于焦点的更多细节：http: //www.w3schools.com/cssref/sel_focus.asp
And some focus usage example: http://www.mozilla.org/access/keyboard/snav/css_usage.html
还有一些重点用法示例：http: //www.mozilla.org/access/keyboard/snav/css_usage.html
UPDATE WITH RESOURCE - THANKS @MrMisterMan
更新资源 - 感谢@MrMisterMan
http://developer.mozilla.org/en/CSS/background-image
http://developer.mozilla.org/en/CSS/background-image
http://developer.mozilla.org/en/CSS/background-position
http://developer.mozilla.org/en/CSS/background-position
JAVASCRIPT:
爪哇脚本：
Using JavaScript add the attribute to your element like below:
使用 JavaScript 将属性添加到您的元素，如下所示：
This will call your function when it has focus and pass it the input element.
这将在具有焦点时调用您的函数并将其传递给输入元素。
Also you can detect onfocusout
你也可以检测 onfocusout
Hope this helps, any questions just ask :)
希望这会有所帮助，任何问题都可以问:)
回答by aorcsik
If you need an image (google logo in the question) you should set the placeholder image as the background of the text field:
如果您需要图像（问题中的 google 徽标），则应将占位符图像设置为文本字段的背景：
input.search {
background-image: url("placeholder.gif");
background-repeat: no-repeat;
}
input.search:focus {
background-image: none;
}
Note::focusis a pseudo-class in css, which is activated on focus
注：:focus是css中的伪类，焦点激活
回答by aorcsik
You may use just CSS.
您可以只使用 CSS。
You can give a solid border with say 4px width.
You can make round corners foor your input using moz-borderor webkit-borderradius.
You can use a border background image.
你可以给出一个宽度为 4px 的实心边框。
您可以使用moz-border或webkit-border半径为您的输入制作圆角。
您可以使用边框背景图像。
here you can read about css3 borders http://www.w3schools.com/css3/css3_borders.asp
在这里你可以阅读关于 css3 边框http://www.w3schools.com/css3/css3_borders.asp
You may try
你可以试试
input {
border:2px solid #dadada;
border-radius:7px;
font-size:20px;
padding:5px;
}
input:focus {
outline:none;
border-color:#9ecaed;
box-shadow:0 0 10px #9ecaed;
}
Hereis the working fiddle
这是工作小提琴
