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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:55:03  来源:igfitidea点击:

Link inside of input tag

htmlxhtml

提问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="&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;" />

(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.

你有两个选择。

  1. Place the image as a background of the input, but this won't be clickable.
  2. Absolutely position the element over an input.
  1. 将图像作为输入的背景,但这将不可点击。
  2. 将元素绝对定位在输入上。

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