Link change in textbox

Question

I am trying to create a script where a user clicks on the link type he wants and it opens it up in a small textfield below based on which he clicks.

For example

How can i create something like this where the user clicks on the link he wishes and it will change that textfield on click to which he desires?

Answer 1

Assuming the following mark-up style:

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

Then you can use plain 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.

Or, with jQuery:

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

JS Fiddle demo.

---

Changed the above HTML to the following, in order to avoid redundant attributes in the pasted HTML and then having to filter them back out, so now targeting the parent li element:

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

And the plain-JavaScript version updated to use the amended 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.

And using a slightly more up-to-date approach, with 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.

---

And, finally, a version that seems compatible with ancient 'legacy' Internet Explorer (tested on IE 8, WinXP and 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.

References:

• addEventListener().
• attachEvent().
• event.preventDefault().
• event.returnValue (an explanation, of sorts, discovered via Google, here on Stack Overflow).
• getElementById().
• getElementsByTagName().
• push().

Answer 2

Make the links go nowhere, e.g #, give them an id, listen to click on thees with jquery or Use the onclick html attribute, select the area and set the clicked link text :-)