Question

In this project I’m working on they made divs that look like textboxes that contain data. Then when you click onto the div they change to read-write textboxes. When this happens the textboxes are a little bigger than the original div size (width).

Outside of changing the divs to R/O textboxes and then flipping them to R/W textboxes is there a way to get the width of the original div and pass it into the size of the newly shown textbox.

Basically, the textbox is hidden at first (1 hidden textbox per screen). When the user clicks on a div, the hidden textbox is shown and moved to the location where the div was (over the top). When the textbox text value changes and is moved off focus the div’s innerHTML is changed and then the textbox is moved down the screen.

What I need to have happen is the div’s original size could be a small text box or a long text box. When the onclick happens I need the textbox width to be the exact same size as the original div size.

Clear as mud right?

Any help is appreciated.

Answer 1

Have you considered using content editable divs?

Look into designMode, and contentEditable in order to forego using text areas all together. This way the size will remain consistant.

Something like the following may work. Please don’t copy/paste as I wrote it in a hurry.

<div id='your_div' onClick='toggle();'> Stuff </div>

<script>
var a_div = document.getElementByID('your_div');

toggle = function() {    
    if(a_div.designMode) {
        a_div.designMode = (a_div.designMode == false) ? true : false;
    } else {
        a_div.contentEditable = (a_div.contentEditable == false) ? true : false;
    }
}
</script>