文本框中的鏈接更改

我試圖創建一個腳本，用戶單擊他想要的鏈接類型，然後在下面的一個小文本框中打開它，並根據它點擊它。文本框中的鏈接更改

例如 My Example

如何創建這樣的事情，他希望它會改變點擊他希望這是文本框鏈接用戶點擊？

來源

2012-07-08 mystycs

簡單的答案是使用jQuery來實現這一點。 – Lion 2012-07-08 21:02:23

「LINK HERE」是什麼意思，什麼是「鏈接類型」？當用戶點擊某個鏈接時，究竟應該在文本框中出現什麼內容？鏈接的URL（href值），或者鏈接到的頁面，或者什麼？ – 2012-07-08 21:17:32

使鏈接無處可去，如＃，給他們一個ID，聽點擊thees與jQuery或使用的onclick HTML屬性，選擇區域並設置點擊鏈接文本:-)

來源

2012-07-08 21:04:42 Sindre

假設以下加價風格：

<ul> 
    <li><a class="linkInsert" href="http://www.example.com/article/">Link (email &amp; blogs)</a></li> 
</ul> 
<input id="linkText" />

然後你可以使用普通的JavaScript：

var links = document.getElementsByTagName('a'), 
    textInput = document.getElementById('linkText'), 
    linkInserts = []; 

for (var i = 0, len = links.length; i < len; i++) { 
    if (links[i].className == 'linkInsert') { 
     linkInserts.push(links[i]); 
    } 
} 

for (var i = 0, len = linkInserts.length; i < len; i++) { 
    linkInserts[i].onclick = function(e) { 
     e.preventDefault(); 
     textInput.value = this.parentNode.innerHTML; 
    }; 
}

JS Fiddle demo。

或者，使用jQuery：

$('a.linkInsert').click(
    function(e){ 
     e.preventDefault(); 
     $('#linkText').val($(this).parent().html()); 
    });

JS Fiddle demo。

變更上述HTML以下內容中，爲了避免在粘貼的HTML冗餘屬性，然後再將具有將它們過濾背出，所以現在靶向父li元件：

<ul> 
    <li class="linkInsert"><a href="http://www.example.com/article/">Link (email &amp; blogs)</a></li> 
</ul> 
<input id="linkText" />

jQuery的：

$('li.linkInsert a').click(
    function(e){ 
     e.preventDefault(); 
     $('#linkText').val($(this).parent().html()); 
    });

JS Fiddle demo。

和平原JavaScript版本更新爲使用修訂後的HTML：

var listElems = document.getElementsByTagName('li'), 
    textInput = document.getElementById('linkText'), 
    linkInserts = []; 

for (var i = 0, len = listElems.length; i < len; i++) { 
    if (listElems[i].className == 'linkInsert') { 
     linkInserts.push(listElems[0].getElementsByTagName('a')[0]); 
    } 
} 

for (var i = 0, len = linkInserts.length; i < len; i++) { 
    linkInserts[i].onclick = function(e) { 
     e.preventDefault(); 
     textInput.value = this.parentNode.innerHTML; 
    }; 
}

JS Fiddle demo。

，並用稍微向上的最新方法，具有addEventListener()：

function showHTML(evt){ 
    evt.preventDefault(); 
    var textInput = document.getElementById('linkText'), 
     target = evt.target, 
     targetTag = target.tagName.toLowerCase(); 
    if (targetTag == 'a'){ 
     textInput.value = target.parentNode.innerHTML; 
    } 
    else if (targetTag == 'li'){ 
     textInput.value = target.innerHTML; 
    } 

} 

document 
    .getElementsByTagName('ul')[0] 
    .addEventListener('click',function(evt) { showHTML(evt) },false);

JS Fiddle demo。

最後，這似乎與古 '傳統' 的Internet Explorer兼容的版本（在IE 8測試，WINXP和IE 9中，Win7）：

function showHTML(evt) { 
    var evt = evt || event; 
    if (evt.preventDefault){ 
     evt.preventDefault(); 
    } 
    else { 
     event.returnValue = false; 
    } 

    var textInput = document.getElementById('linkText'), 
     target = evt.target ? evt.target : evt.srcElement, 
     targetTag = target.tagName.toLowerCase(); 
    if (targetTag == 'a') { 
     textInput.value = target.parentNode.innerHTML; 
    } 
    else if (targetTag == 'li') { 
     textInput.value = target.innerHTML; 
    } 

} 

if (window.addEventListener) { 
    document.getElementsByTagName('ul')[0].addEventListener('click', function(evt) { 
     showHTML(evt) 
    }, false); 
} 
else if (window.attachEvent) { 
    document.getElementsByTagName('ul')[0].attachEvent('onclick', showHTML); 
}

JS Fiddle demo。

參考文獻：

來源

2012-07-08 21:23:19

文本框中的鏈接更改

回答

相關問題