contents of textbox erased after tabbing to next textbox

I have several data entry pages in my Web application, and they have textboxes that need to appear when their labels (property names) are clicked, and disappear when their labels are double-clicked. I'm using JavaScript to make this happen (see code below), but for some reason, the only way I can enter any text into a textbox is if I keep the mouse-button pressed down within the textbox while I'm entering something. (I'm seeing this w/both IE and Firefox). But when I tab to the next textbox, what I entered in the previous textbox disappears. Is there any way to fix this?

JavaScript code to display the property name, textbox and label:

document.getElementById("div" + className).innerHTML = newClassName + "<br><input type='text' name='txt" + className + "' onBlur='javascript:updateDOM(this);' />" + label;

JavaScript code to just display the property name:

document.getElementById("div" + className).innerHTML = newClassName;

If the browser behavior I've described in my original message is unavoidable, then I'll probably need to change my application's behavior, so I'm open to suggestions on that.


I have several data entry pages in my Web application, and they have textboxes that need to appear when their labels (property names) are clicked, and disappear when their labels are double-clicked. I'm using JavaScript to make this happen (see code below), but for some reason, the only way I can enter any text into a textbox is if I keep the mouse-button pressed down within the textbox while I'm entering something. (I'm seeing this w/both IE and Firefox). But when I tab to the next textbox, what I entered in the previous textbox disappears. Is there any way to fix this?

JavaScript code to display the property name, textbox and label:

document.getElementById("div" + className).innerHTML = newClassName + "<br><input type='text' name='txt" + className + "' onBlur='javascript:updateDOM(this);' />" + label;

JavaScript code to just display the property name:

document.getElementById("div" + className).innerHTML = newClassName;

You're going about hiding your textboxes in an odd way - by actually deleting them.

You can use element.style.display="none" and element.style.display="block" to hide/show html elements. (You can also use visibility="hidden" and visibility="visible" to keep the element in the flow of the page while hidden.) This way your inputs won't be removed from the page and will maintain their values.