Question

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

例如 My Example

如何在用户点击他想要的链接时创建这样的内容，它会在点击时将该文本字段更改为他想要的内容？

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

参考文献：

Answer 2

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

文本框中的链接更改

2 个答案: