javascript - 文本框中的链接更改

Question

我正在尝试创建一个脚本，用户单击他想要的链接类型，并根据他单击的内容在下面的一个小文本字段中将其打开。

例如

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

Answer 1

假设以下标记样式：

<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 小提琴演示。

或者，使用 jQuery：

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

JS 小提琴演示。

---

将上面的 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 小提琴演示。

并且更新了纯 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 小提琴演示。

并使用稍微更新的方法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 小提琴演示。

---

最后，一个似乎兼容的版本古老的'legacy' 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 小提琴演示。

参考：

• addEventListener().
• attachEvent().
• event.preventDefault().
• event.returnValue（某种解释，通过谷歌发现，在 Stack Overflow 上）。
• getElementById().
• getElementsByTagName().
• push().

Answer 2

使链接无处可去，例如#，给它们一个id，用jquery听点击thees或使用onclick html属性，选择区域并设置点击的链接文本:-)