Question

如何在输入框（文本框）中显示a href和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>

提前感谢。

Answer 1

根据评论，我猜你想要一个输入字段，将HTML代码作为默认文本。您必须使用字符参考代码作为引号，少于/大于符号。

<input type="text" value="&lt;a href=&quot;http://www.mysite.com/link&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://www.mysite.com/img.jpg&quot; border=&quot;0&quot; alt=&quot;mysite.com&quot;&gt;&lt;/a&gt;" />

（顺便说一下，你提到“喜欢Photobucket” - 你可以看一下网站的HTML，看看他们是怎么做的。）

Answer 2

您有两种选择。

将图像作为输入的背景，但这不会被点击。
绝对将元素放在输入上。

1：

.myInput { background:url(path/to/img.jpg) 5px 5px no-repeat; }

2：

HTML

<div class="inputContainer">
    <input class="myInput" type="text" name="myInput" id="myInput" />
    <a href="#" class="inputImg"><img src="#" /></a>
</div>

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; }

根据您的输入尺寸，图片尺寸和常规位置，您需要使用位置和值，但这应该符合您的要求。

Answer 3

正如评论所提到的，你不能在input文本框中输入一个链接（尽管你可以使用JavaScript模拟一个链接）。

对于背景图片，请使用CSS background-image。

链接输入标签内部

3 个答案: