是否可以在 <input> 字段中放置链接？答案

【问题标题】：Is it possible to place a link inside <input> field?是否可以在 <input> 字段中放置链接？
【发布时间】：2014-01-31 08:49:29
【问题描述】：

是否可以在登录和注册上放置链接？

<input type="text" class="formcontrol" value="Please Login or Register to view your tracking link.">

【问题讨论】：

也许你根本不需要使用标签。
可能重复：stackoverflow.com/questions/6959484/link-inside-of-input-tag

标签： html forms css

【解决方案1】：

您应该创建一个 div 并将其设置为输入样式：

  <div class="form-control">
      <a href="www.google.com">www.google.com</a>
  </div>

 .form-control {
     border: 1px solid #ece8e8;
     height: 40px;
     border-radius: 3px;
     padding-left: 10px;
     box-sizing: border-box;
     font-family: SourceSansPro-Regular;
     font-size: 14px;
     margin-bottom: 10px;
  }

结果是：

【讨论】：

【解决方案2】：

是的，我们可以使用“点击”来做到这一点

下面是代码：-

<input type="button" onclick="window.location.href = '#';" value="log in"/>

【讨论】：

【解决方案3】：

你可以在点击时添加一个函数调用：

<input type="text" onclick="navigate()" value="my-value" />

...
function navigate(){
    window.open("my-url",'_blank');
}

【讨论】：

【解决方案4】：

The <input> element may not have a close tag

文本/html中的标记省略：
没有结束标签。

这意味着它可能不包含 HTML。

最重要的是，它是Interactive Content，这意味着它不允许包含<a> 元素（或任何其他交互内容）。 <textarea> 也是交互式内容，因此以下也不起作用：

<textarea>Please <a...>Login</a> or <a...>Register</a> to view your tracking link.</textarea>

如果您想为包含链接的字段使用占位符，则需要将元素样式设置为类似于 <input> 元素：

input,
.input {
  border: 1px solid #888;
  box-sizing: border-box;
  display: block;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 20px;
  margin: 10px 0;
  padding: 2px 5px;
  vertical-align: baseline;
  width: 300px;
}

<input type="text" value="Looks like an input"/>
<div class="input">Looks like an input, <a href="#">but isn't</a></div>

【讨论】：

【解决方案5】：

我建议在表单中将其作为 html 进行，并使用 css 对其进行样式设置，使其看起来像一个文本字段，如果这是你想要的。这样，它将匹配表单的布局并提供您需要的“带有链接”的文本。以下代码可能需要一些调整。

<style type="text/css">
p.input{
width:250px;
font-size:12px;
background:#fff;
border-color:#999;
border-width:1px;
border-style:solid;
padding:3px;
}
p.input a{
color:#000;
}
</style>
<p class="input">Please <a href="/login">Login</a> or <a href="/register">Register</a> to view your tracking link.</p>

【讨论】：

【解决方案6】：

不，您要做的是用<div> 模拟<input>。您可以使 <div> 可键入，请参见此处：Make a DIV look like an input

然后您可以添加<div> 通常可以采用的任何您喜欢的内容和类。例如，如果您需要将链接呈现为用户类型，则您必须变得聪明一些，但仍然可以通过将函数绑定到内容更改时调用的 <div> 来实现。

Twitter 的推文输入框实际上是一个<div>，这就是它如何突出显示超过 140 个字符的文本。

【讨论】：

【解决方案7】：

根据 w3c，结束标签被禁止在输入标签上，这意味着您不能在输入标签内放置任何元素

http://www.w3.org/TR/html401/interact/forms.html

【讨论】：

【解决方案8】：

不，在输入内部你不能使用任何标签。您可以更改输入role 或appearance，但这是一个不好的方法。

【讨论】：

【解决方案9】：

不，这是不可能的。

您可以将input 标记的值设置为某种链接，但它不能用作超链接。用户访问该 URL 的唯一方法是复制该 URL，然后将其粘贴到 URL 栏。

你应该做的是在这个input标签之后放置一个<a>标签，这是大多数网站所做的。

【讨论】：