文本框中的链接更改

我试图创建一个脚本，用户单击他想要的链接类型，然后在下面的一个小文本框中打开它，并根据它点击它。文本框中的链接更改

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

文本框中的链接更改

回答

相关问题