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

问题描述

全部好，

我知道这有点奇怪的问题，但请建议。

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

我想要在输入类型文本字段中的网站URL内容上创建链接，而不是任何其他html标记，是否可能，如果是，如何。

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.

关心&谢谢
Amit

Regards & Thanks Amit

推荐答案

遗憾的是，您不能按照HTML 4或更低版本的要求进行此操作。即使HTML5有几个新的INPUT TYPE，包括URL，它只进行验证并具有一些其他有用的功能，但不会给你想要的。

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.

您可能会寻找一些可以帮助您实现此目的的jQuery插件，大多数使用Rich Text或其他在线/基于Web的HTML WYSIWYG编辑器后面的相同主体。我自己很难找到它们。

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.

这3种情况（我现在能够想到的）几乎就是你在HTML4或以下版本中所面临的情况，因为实际的HTML4 INPUT文本框中的文字是纯粹的文本。它不是HTML，因此不可点击。以下是一些变体：

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. INPUT标记的VALUE属性，也称为对应DOM对象的value属性（即基本上你一直在做什么，也是你最希望的，如果你决定你必须在文本框中有实际的文本（因为文本框中的文本是VALUE属性，因为我有 http://yahoo.com 在这个例子中：

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

其中INPUT的VALUE = http://yahoo.com ，您可以使用以下方法检索：

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

• 纯javascript：

• in pure javascript:

document.getElementById（myTxtbox）。value

在jQuery中：

$（myTxtBox）。val（）

当您的链接/网址时是和之间的文本，即文本框的text / innerText。这对您的问题/场景没用，因为它不可点击，更重要的是不在文本框中。但是，有人可能希望使用此功能来检索您可能用作标签的任何文本（如果您尚未使用< label> 标签本身）：

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>

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

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

• 纯javascript：

• pure javascript:

document.getElementById（myTxtbox）。innerText

jQuery：

$（myTxtBox）。text（） - 您可以使用它来捕获您可能使用的任何文本一个标签（如果你没有使用标签）。

$("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).

结果是： http://yahoo.com

当您的链接/网址是带有HREF的ANCHOR（）形式时在和之间的url（和可见的链接文本），即文本框的innerHTML。这更接近您想要的，因为链接将显示为，并作为实际链接。但是，它不会在文本框内。它将与示例＃2一样。同样，如示例＃1中所述，您不能拥有实际工作的HTML，因此在文本框中可以使用链接：

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>

再次，类似于示例＃2，文本框的innerHTML是这里不是属性，只有DOM对象属性，但仍可以检索：

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:

• 纯javascript：

• pure javascript:

document.getElementById（myTxtbox）。innerHTML

jQuery：

$（myTxtBox）。html（）

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

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