链接输入文本字段

Question

大家好,

我知道这有点奇怪的问题,但请建议.

我想在输入类型"text"字段中的网站url内容上创建一个链接而不是任何其他html标记,是否可能,如果是,如何.

关心和感谢Amit

Answer 1

我不知道我是否正确理解了你的问题。根据我的理解，我给出了答案。请随意提出您的问题。没有什么是不可能的。

<a href="http://www.google.com" ><input type='text' style="border:1px solid blue;"></input></a>

它显示一个文本框。您可以在其中输入任何数据。如果您按 Enter 键，则会将页面转发到 Google.com

您可以使用 SPAN 代替 INPUT。这也有同样的目的。

<a href="http://www.google.com" ><span style="border:1px solid blue;" >Link</span></a>

Answer 2

遗憾的是,您不能按照HTML 4或更低版本的要求进行此操作.即使HTML5其中有几个新的输入类型,包括URL,它只做验证,并有一些其他有用的功能,但不会给你想要你想要的.

你可能会寻找一些jQuery插件,可以帮助你做到这一点,最落后使用富文本或其他在线/基于Web的HTML WYSIWYG编辑器同样的原理.我自己很难找到它们.

这3种情况(即我能想到的现在)是相当多的,你将与HTML4或低于本身面临什么样的,因为在实际的HTML4输入文本框的文本是纯文本.它不是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是和之间的文本,即文本框的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. 当你的链接/ URL是Anchor()与在之间的HREF到您的网址(和可见的链接文本)以及,即文本框的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>

Answer 3

你可以简单地这样做：

<a href="index.html"> <input type=text value="link" readonly> </a>

因此，每当有人单击文本框时，它都会充当链接，并且由于它是只读的，因此不会有任何文本输入/更改。

但要小心，因为它看起来不像常规链接，可能会导致混乱，或者可能被误解为普通文本框。

Answer 4

您希望某人点击文本框实际上被视为链接点击吗？

对我来说听起来很恶意，但您可以通过 javascript 将焦点事件绑定到 window.redirect()。