Javascript 文本框中的链接更改

我正在尝试创建一个脚本，用户点击他想要的链接类型，然后在下面的一个小文本字段中打开它，他根据这个文本字段点击

比如说

---

我怎样才能创建这样的东西，用户点击他想要的链接，它会在点击时更改他想要的文本字段？

使链接无处可去，例如#，给他们一个id，用jquery听click，或者使用onclick html属性，选择该区域并设置单击的链接文本：-）

假设采用以下标记样式：

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

---

将上述HTML更改为以下内容，以避免粘贴的HTML中出现冗余属性，然后必须将其过滤掉，因此现在将目标锁定在父

li

元素：

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

普通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;
    };
}​

---

最后，一个版本似乎与古老的“传统”Internet Explorer兼容（在IE 8、WinXP和IE 9、Win7上测试）：

参考资料：

---

简单的答案是使用jQuery来实现这一点。“链接在这里”是什么意思，“链接类型”是什么？当用户单击某个链接时，文本字段中应该显示什么？链接的URL（href值），或者链接到的页面，或者什么？

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

$('li.linkInsert a').click(
    function(e){
        e.preventDefault();
        $('#linkText').val($(this).parent().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;
    };
}​

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);

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);
}​