输入文本字段中的链接 [英] Link in input text field

问题描述

大家好，

我知道这个问题有点奇怪，但请提出建议.

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

问候&谢谢阿米特

解决方案

很遗憾，您在 HTML 4 或更低版本中要求的方式无法做到这一点.即使 HTML5 有几个新的 INPUT TYPEs，包括 URL，它也只做验证并有一些其他有用的功能，但不会给你想要的.

您可能会寻找一些可以帮助您做到这一点的 jQuery 插件，大多数使用与富文本或其他在线/基于 Web 的 HTML 所见即所得编辑器背后相同的原理.我自己很难找到它们.

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

1. INPUT 标签的 VALUE 属性，也被称为相应 DOM 对象的值"属性(这基本上是你一直在做的，也是你最希望的，如果你决定你必须拥有实际上在文本框内的文本(因为文本框内的文本是 VALUE 属性，因为我有它与 "http://yahoo.com"在这个例子中):

   INPUT's VALUE = "http://yahoo.com"，你可以用它来检索:

   • 在纯 JavaScript 中:

     document.getElementById("myTxtbox").value

   • 在 jQuery 中:

     $("myTxtBox").val()

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

   <块引用>

   http://yahoo.com</输入>

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

   • 纯 JavaScript:

     document.getElementById("myTxtbox").innerText

   • jQuery:

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

   结果是:http://yahoo.com

3. 当您的链接/url 是 ANCHOR () 的形式时，在 和 之间，即文本框的innerHTML，带有指向您的url(和可见链接文本)的HREF.这有点接近您想要的，因为链接将显示为实际链接，并作为实际链接运行.但是，它不会在文本框内.它将在它旁边，如示例 #2 中所示.同样，如示例 #1 中所述，您不能拥有实际工作的 HTML，因此无法在文本框内有一个有效的链接":

   <块引用>

   <a href="http://yahoo.com">http://yahoo.com</a></输入>

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

   • 纯 JavaScript:

     document.getElementById("myTxtbox").innerHTML

   • jQuery:

     $("myTxtBox").html()

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

HI All,

I know this is bit strange question, but please suggest.

I want to create a link on website url content in input type"text" field not any other html tag,Is it possible and if yes how.

Regards & Thanks Amit

解决方案

This is unfortunately not possible in the way you've asked it in HTML 4 or below. Even with HTML5 which has several new INPUT TYPEs, including URL, it only does validation and has some other useful functions, but won't give you want you want.

You might look for some jQuery plugins that can help you do this, most use the same principals behind Rich Text or other online/web-based HTML WYSIWYG editors. I've had trouble locating them myself.

These 3 situations (that I can think of right now) are pretty much what you will face natively with HTML4 or below, as text in an actual HTML4 INPUT textbox is pure text. It is not html and therefore NOT clickable. Here are some variations:

1. The INPUT tag's VALUE attribute, also referenced as the corresponding DOM object's "value" property (which is basically what you've been doing, and the most you can hope for, if you decide that you MUST have the text that's ACTUALLY inside the textbox (because the text inside the textbox is the VALUE attribute, as I have it with "http://yahoo.com" in this example):

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

   where the INPUT's VALUE = "http://yahoo.com", which you can retrieve with:

   • in pure javascript:

     document.getElementById("myTxtbox").value

   • in jQuery:

     $("myTxtBox").val()

2. When your link/url is the text in between the and , i.e. the text/innerText of the textbox. This is useless for your question/scenario since it's not clickable, and more importantly NOT INSIDE the textbox. However, someone might want to use this to retrieve any text that you may be using as a label (if you're not using the <label> tag itself already that is):

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

   The textbox's text/innerText is NOT an attribute here, only a DOM object property, but can still be retrieved:

   • pure javascript:

     document.getElementById("myTxtbox").innerText

   • jQuery:

     $("myTxtBox").text() -- you would use this to capure any text that you may be using as a label (if you're not using the tag).

   The result being: http://yahoo.com

3. When your link/url is the form of an ANCHOR () with an HREF to your url (and visible link text) in between the and , i.e. the innerHTML of the textbox. This is getting a bit closer to what you want, as the link will appear as, and function as an actual link. However, it will NOT be inside of the textbox. It will be along side it as in example #2. Again, as stated in example #1, you CANNOT have actual working HTML, and therefore a working 'link' inside of a textbox:

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

   Once again, similarly to example #2, the textbox's innerHTML is NOT an attribute here, only a DOM object property, but can still be retrieved:

   • pure javascript:

     document.getElementById("myTxtbox").innerHTML

   • jQuery:

     $("myTxtBox").html()

   The result being: <a href="http://yahoo.com">http://yahoo.com</a>

这篇关于输入文本字段中的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！