html - 在 <INPUT> 字段中创建/放置 anchor <A HREF>

Question

有什么方法可以在输入字段内允许链接/ anchor ，以便该字段中的任何文本也可点击且可操作？

Answer 1

不幸的是，这在 HTML 4 或以下版本中是不可能的。即使 HTML5 有几个新的 INPUT TYPEs，包括 URL，它只做验证和一些其他有用的功能，但不会给你想要的。

您可能会寻找一些可以帮助您执行此操作的 jQuery 插件，其中大多数使用 Rich Text 或其他在线/基于 Web 的 HTML 所见即所得编辑器背后的相同原则。我自己找不到它们。

这 3 种情况(我现在能想到的)几乎是您在使用 HTML4 或更低版本时会遇到的情况，因为实际 HTML4 INPUT 文本框中的文本是纯文本。它不是 html，因此不可点击。以下是一些变体:

1. INPUT 标记的 VALUE 属性，也被引用为相应的 DOM 对象的“值”属性(这基本上就是您一直在做的事情，如果您决定必须拥有实际位于文本框内的文本(因为文本框内的文本是 VALUE 属性，如本例中的“http://yahoo.com”):

       <input id="myTxtbox" type="text" value="http://yahoo.com">
   

   其中 INPUT 的 VALUE = "http://yahoo.com "，您可以通过以下方式检索:

   • 在纯 javascript 中:

     document.getElementById("myTxtbox").value

   • 在 jQuery 中:

     $("myTxtBox").val()

2. 当您的链接/url 是 <INPUT> 之间的文本时和 </INPUT> ，即文本框的 text/innerText。这对您的问题/场景没有用，因为它不可点击，更重要的是不在文本框内。但是，有人可能想使用它来检索您可能用作标签的任何文本(如果您还没有使用 <label> 标签本身):

   <input id="myTxtbox" type="text">
     http://yahoo.com
   </input>
   

   文本框的 text/innerText 在这里不是属性，只是 DOM 对象属性，但仍然可以检索:

   • 纯 javascript:

     document.getElementById("myTxtbox").innerText

   • jQuery:

     $("myTxtBox").text() -- 您可以使用它来捕获您可能用作标签的任何文本(如果您没有使用标签)。

   结果是:http://yahoo.com

3. 当您的链接/网址是 anchor (<A>) 的形式时，您的网址(和可见链接文本)的 HREF 位于 <INPUT> 之间和 </INPUT> ，即文本框的 innerHTML。这越来越接近您想要的内容，因为链接将显示为实际链接并作为实际链接运行。但是，它不会在文本框内。它将与它并排，如示例 #2 所示。同样，如示例 #1 所述，您不能拥有实际工作的 HTML，因此不能在文本框内使用工作“链接”:

   <input id="myTxtbox" type="text">
     <a href="http://yahoo.com">
       http://yahoo.com
     </a>
   </input>
   

   再一次，与示例 #2 类似，文本框的 innerHTML 在这里不是属性，只是 DOM 对象属性，但仍然可以检索:

   • 纯 javascript:

     document.getElementById("myTxtbox").innerHTML

   • jQuery:

     $("myTxtBox").html()

   结果是:<a href="http://yahoo.com">http://yahoo.com</a>