在看起來像文本區域的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中添加鏈接

回答

相關問題