在看起来像文本区域的DIV中添加链接

我添加了一个看起来像文本区域的DIV，以便我可以在其中显示超链接。我们面临的问题是，超文本链接在文本区域中显示正确，看起来像是&，感觉DIV，但它不可点击。在看起来像文本区域的DIV中添加链接

HTML：

<div id="input" contenteditable><a href="http://www.w3schools.com">Visit W3Schools</a></div>

CSS：

#input { 
    -moz-appearance: textfield; 
    -webkit-appearance: textfield; 
    background-color: white; 
    background-color: -moz-field; 
    border: 1px solid darkgray; 
    box-shadow: 1px 1px 1px 0 lightgray inset; 
    font: -moz-field; 
    font: -webkit-small-control; 
    margin-top: 5px; 
    padding: 2px 3px; 
    width: 398px;  
}

我怎样才能使这个超链接点击并导航到URL？

来源

2015-05-06 Kris

当有人点击链接时会发生什么？它应该移动光标在那里还是打开链接？ – bookcasey

@Kris检查这个jsfiddle，应该提供你想要的http://jsfiddle.net/y6dkwrov/7/ –

我附加了前面提到的同一个问题。锚标记是contenteditable，因此无法点击。您可以将锚标记封装在另一个需要关闭contenteditable的div中。

How to make clickable anchor in contentEditable div?

来源

2015-05-06 23:29:05

现在的问题是，DIV不再可编辑。我希望多个HREF通过用逗号分隔来存在于这个DIV中。因此，除了已经在DIV中的现有href，用户应该能够编辑和添加更多href。 – Kris

这真的回到@ bookcasey的问题。当你点击它时，你想要锚点链接，还是在点击它时将光标放在那里，它几乎不是/或。 –

文字提交/ DIV应该有这样的=“Google，Yahoo，MSN，..”带双引号的内容是DIV中显示的内容。现在，如果用户将光标置于“Google”的顶部并点击它，那么该页面将导航到Google主页，如果用户将光标放在“..”上，那么它应该显示闪烁的“|”这会告诉用户可以在这里输入一些文字。这可能吗。 – Kris

在看起来像文本区域的DIV中添加链接

回答

相关问题