Hyperlink 输入文本字段中的链接

大家好

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

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

问候与感谢

---

Amit

你想让点击文本框的人实际上被视为点击链接吗

---

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

我不知道我的问题是否正确。据我所知，您希望能够在输入字段中键入…-标记。不允许使用其他标签。您可以使用PHP实现这一点，例如：

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

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

//PHP代码
$link=strip_标签（$_POST['link']，'a'）；//删除除-标记之外的所有其他标记。。。

---

这就是你的意思吗？

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

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

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

您可以使用范围而不是输入。这也有同样的目的

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

---

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

例如，虚拟键盘img以这种方式嵌入到俄语谷歌页面（）的输入字段中

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

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

---

所以现在的任务更加艰巨。也许您应该修改您的模型，而不是代码。

不幸的是，这不可能按照您在HTML4或更低版本中要求的方式进行。即使HTML5有几个新的输入类型，包括URL，它也只做验证，还有一些其他有用的功能，但不会给你想要的

您可能会寻找一些jQuery插件来帮助您做到这一点，大多数jQuery插件在富文本或其他在线/基于web的HTML WYSIWYG编辑器背后使用相同的原则。我自己找不到他们

这三种情况（我现在可以想到）与HTML4或以下版本的本机情况基本相同，因为实际HTML4输入文本框中的文本是纯文本。它不是html，因此不可单击。以下是一些变体：

输入标记的VALUE属性，也被引用为相应的DOM对象的“VALUE”属性（这基本上就是您一直在做的事情，也是您最希望看到的，如果您决定必须将文本实际放在文本框中（因为文本框中的文本是VALUE属性，正如我所说的“”在本例中）：

textbox的text/innerText在此处不是属性，只是DOM对象属性，但仍可检索：

• 纯javascript：

  document.getElementById（“myTxtbox”）.innerText

• jQuery：

  $（“myTxtBox”）.text（）

  --您可以使用它来捕获任何可能用作标签的文本（如果您没有使用标签）

结果是：

http://yahoo.com

当您的链接/url是锚定（）的形式时，带有指向url的HREF（和可见链接文本）在和之间，即文本框的innerHTML。这越来越接近您想要的内容，因为链接将显示为，并作为实际链接发挥作用。但是，它将不在文本框内。它将位于文本框旁边，如示例2所示。同样，如示例1所述，您不能有实际的工作HTML，因此也不能有工作HTML在文本框中设置“链接”：

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

• 纯javascript：

  document.getElementById（“myTxtbox”）.innerHTML

• jQuery：

  $（“myTxtBox”）.html（）

结果是：

---

这就是我使用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

//使人名成为指向新选项卡中页面的超链接
var nameLink=“/exampleUrl/？initStudentId=$”+studentId；
$（“#studentNameLink”）.replace为（$（“#studentNameLink”）.html（）；//打开以前包装的所有文本字段
$（nameTextField）.wrap（“”；//在锚点中wrap文本字段
$（nameTextField）.css（'color'，'#326699'）；//将文本设为蓝色
$（nameTextField）.val（studentName）；//设置文本字段值

您可以简单地执行以下操作：

因此，每当有人点击文本框时，它就作为一个链接，并且由于它是只读的，因此不会有任何文本输入/更改

---

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

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

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

使用以下命令：

HTML

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

---

您的意思是使输入的文本成为输入中的超链接

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

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

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

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