CODEWITHSUNDEEP
javascriptjqueryhtmlcss
soniccool
soniccool

Reputation: 6058

Link change in textbox

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

Upvotes: 0

Views: 319

Answers (2)

David Thomas
David Thomas

Reputation: 253308

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:

Upvotes: 2

Sindre
Sindre

Reputation: 3930

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

Upvotes: 0

Related Questions