Question

全部好，

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

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

问候＆amp;谢谢阿米特

Answer 1

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

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

这三种情况（我现在能想到的）几乎就是HTML4或更低版本的本地特征，因为实际的HTML4 INPUT文本框中的文本是纯文本。它不是HTML，因此不可点击。以下是一些变体：

INPUT标签的VALUE属性，也被称为相应的DOM对象的“value”属性（基本上就是你一直在做的，如果你决定必须拥有文本框中的文本实际上是正确的（因为文本框中的文本是VALUE属性，因为我在此示例中使用“http://yahoo.com”：
```
    <input id="myTxtbox" type="text" value="http://yahoo.com">
```
INPUT的VALUE =“http://yahoo.com”，您可以通过以下方式检索：
- ：
  
  document.getElementById("myTxtbox").value
- ：
  
  $("myTxtBox").val()
当你的链接/网址是和之间的文本时，即文本框的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
当你的链接/网址是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 2

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

<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 3

这就是我用JavaScript和JQuery做到的。这将整个文本字段包装在一个超链接中，因此基本上整个文本字段都是可单击的，这可能不是您正在寻找的功能。虽然它适用于我的目的。

我之所以不使用$（nameTextField）.click（function（）{...}）结构，是因为我使用的文本字段设置了disabled属性，因此click函数不是被解雇。这就是我必须将文本字段包装在超链接中的原因。

    // Make person name a hyperlink to page in new tab
    var nameLink = "/exampleUrl/?initStudentId=$" + studentId;
    $("#studentNameLink").replaceWith($("#studentNameLink").html()); // Unwrap any previously wrapped text fields
    $(nameTextField).wrap("<a id='studentNameLink' target='_blank' href='" + nameLink + "'>"); // Wrap text field in anchor
    $(nameTextField).css('color', '#326699'); // Make text blue
    $(nameTextField).val(studentName); // Set text field value

Answer 4

你可以这样做：

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

因此，无论何时有人点击文本框，它都可以作为链接使用，并且由于它是只读的，因此不会有任何文本输入/更改。

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

Answer 5

这里有一半人误解了它。 OP希望输入字段的内容/值立即为超链接，而不是字段本身。

这是可行的......虽然它不是输入字段，但外观就像这样。

使用以下内容：contenteditable=true

<强> HTML

<div contenteditable=true>
  <a id=lnk style=-moz-appearance:textfield href=http://www.google.com>http://www.google.com</a>
</div>

或可选-webkit-appearance ..取决于

<强>的JavaScript

var lnk=document.getElementById('lnk');
lnk.addEventListener('click',()=>{
    window.location.href = lnk.getAttribute('href');
});

http://jsfiddle.net/Dezain/jm9mzrzp/

Answer 6

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

听起来很恶意，但您可以通过javascript将焦点事件绑定到window.redirect（）。

Answer 7

我不知道我的问题是否正确。据我所知，你希望能够在输入字段中输入...-标签。不应该允许其他标签。您可以通过使用PHP来实现此目的，例如：

<!-- HTML-Code -->
<input type="text" name="link" />

// PHP-Code
$link = strip_tags($_POST['link'], 'a'); // Remove all other tags than the <a>-Tag...

这是你的意思吗？

Answer 8

是的，这是可能的，但事情并非那么简单。您需要创建div或您喜欢的其他标记，它们将始终浮动在输入上，使用CSS位置，并在其中创建锚点。

例如，虚拟键盘img嵌入到俄语Google页面上的输入字段中（http://www.google.ru/）

由于浏览器兼容性，这不是一项简单的任务。

编辑：更多地了解您的问题。您仍然需要答案的第一部分，并且您需要在输入中处理按键事件。输入符号后，您需要更新浮动div。

所以现在任务更加困难。也许你应该修改你的模型而不是代码。

链接输入文本字段

8 个答案: