Html 输入标签内的链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6959484/
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
Link inside of input tag
提问by maxlk
How to display a a hrefand a img srcinside a input box (text box). ex: i want to display this inside a text box ( <input id=link)
如何在输入框（文本框）内显示 aa href和 a img src。例如：我想在文本框中显示它 ( <input id=link)
<a href="http://www.mysite.com/link" target="_blank"><img src="http://www.mysite.com/img.jpg" border="0" alt="mysite.com"></a>
thanks in advance.
提前致谢。
采纳答案by JJJ
Based on the comments, I would guess that you want an input field that has that HTML code as the default text. You must use character reference codes for quotes and less/greater than signs.
根据评论，我猜您想要一个以该 HTML 代码作为默认文本的输入字段。您必须对引号和小于/大于符号使用字符参考代码。
<input type="text" value="<a href="http://www.mysite.com/link" target="_blank"><img src="http://www.mysite.com/img.jpg" border="0" alt="mysite.com"></a>" />
(By the way, you mentioned "like in Photobucket" -- you can just look at the site's HTML to see how they do it.)
（顺便说一句，您提到了“像在 Photobucket 中一样”——您只需查看网站的 HTML 即可了解他们是如何做到的。）
回答by Seth
You have two options.
你有两个选择。
- Place the image as a background of the input, but this won't be clickable.
- Absolutely position the element over an input.
- 将图像作为输入的背景，但这将不可点击。
- 将元素绝对定位在输入上。
1:
1：
.myInput { background:url(path/to/img.jpg) 5px 5px no-repeat; }
2:
2：
HTML
HTML
<div class="inputContainer">
<input class="myInput" type="text" name="myInput" id="myInput" />
<a href="#" class="inputImg"><img src="#" /></a>
</div>
CSS
CSS
.inputContainer { position:relative; }
.myInput { padding-left:25px; /* This will move the text from under the image */ }
.inputImg { left:5px; position:absolute; top:5px; z-index:5; }
You'll need to play with the position and values depending on your input size, image size and general placement, but that should do what you want.
您需要根据输入大小、图像大小和一般位置来调整位置和值，但这应该可以满足您的需求。
回答by Widor
As comments mention, you can't literally put a link in an inputtext box (although you could simulate one with JavaScript).
正如评论中提到的，你不能在input文本框中直接放置链接（尽管你可以用 JavaScript 模拟一个）。
For the background image, use CSS background-image.
对于背景图像，请使用 CSS background-image。
