CODEWITHSUNDEEP
javascripthtml
Alienz
Alienz

Reputation: 118

How do I select text in dynamically added input box when parent div has onclick handler?

I have code similar to this:

<div id="div1" onclick="myfunc()">
    <span class="myspan"></span>
</div>

Now, if a user clicks on a button elsewhere on the page, an input box is dynamically added to the span. The button also gives the input box focus.

The input box has code like this:

<input type=text onkeypress="runthis()" onblur="runthis()">

The problem is, if I try to select text in the input box, the parent onclick and onblur fire. I want to edit the input box until I click away (or hit enter).

This is basically a quick edit box. A user clicks an edit button, the input box appears. They click out or hit enter and it saves.

Edit (actual code):

<div class="plBoxContainer">
<a href="playlists" onClick="playlists(id); return false;" onMouseOver="if(RUNPLAYLIST){this.getElementsByTagName('span')[0].style.textDecoration='underline'}" onMouseOut="this.getElementsByTagName('span')[0].style.textDecoration='none'">
<br><span class="folderName">Some Name</span>
<span class="plEdit" onClick="PlEditBox(this.previousSibling); document.getElementById('dummydiv').innerHTML=id;">&nbsp;</span>
Some text</a>
</div>

JS:

function PlEditBox(folderName){
    RUNPLAYLIST = 0;
    name = folderName.innerHTML;
    folderName.innerHTML = '<input type=text id="folderNameChange" value="'+name+'" onkeypress="return PlDoEdit(this.value, document.getElementById(\'dummydiv\').innerHTML, event);" onBlur="PlDoEdit(this.value, document.getElementById(\'dummydiv\').innerHTML, \'blur\')">';
    document.getElementById('folderNameChange').focus();
    document.getElementById('folderNameChange').select();
}

function PlDoEdit(value, id, e)
{
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    else if (e && e != blur) keycode = e.which;
    else keycode = '';

    if (keycode == 13 || e == 'blur')
    {
        RUNPLAYLIST = 1;
        //do some unrelated stuff here
        return false;
    }
    else return true;
}

function playlists(plID) 
{
    if(RUNPLAYLIST==0)
    {
            RUNPLAYLIST = 1;
            return false;
    }
    //do a bunch of unrelated stuff here
}

Upvotes: 1

Views: 519

Answers (2)

Brendan
Brendan

Reputation: 1883

JS Fiddle isn't allowing saving/sharing at the moment as they are migrating their servers. In the mean time, there's a screenshot at the bottom of this post that might help.

It looks like you're using pure Javascript, but I used YUI to abstract away the even normalization; nobody should be bothered with that! :)

Basically the event handler for the DIV element won't actually do anything unless the DIV is the true even target (i.e. the DIV was clicked directly rather than the INPUT within).

(Right-click > View Image in Firefox to see full size.) JS Fiddle of solution

Update

I made another JS Fiddle that displays a name, turns it into an edit box if you click on it, and saves the value (returning to simple display) when the INPUT loses focus or when ENTER key is pressed.

(Right-click > View Image in Firefox to see full size.) JS Fiddle 2 of solution

Upvotes: 1

The Alpha
The Alpha

Reputation: 146221

I think you should use event.returnValue = false/event.preventDefault in your function to prevent event bubling. Like 

event.preventDefault ? event.preventDefault() : event.returnValue = false;

For more see http://mootools.net/docs/core/Types/DOMEvent#Event:stop

Upvotes: 1

Related Questions