Change text to textbox onclick

**Augury** · 07-23-2005, 12:45 AM

I am building a concept application (in php, coldfusion, and asp) so any solution need not be 100% elegant. It is just to demostrate that something is possible. However, the limiting factor is not my programming ability but rather my html scripting ability.
I am fairly certain that this is possible. If I am wrong I can accept that.

The goal: to have multiple chunks of text that when clicked turn into a textbox. (Obviously they are turning into a textbox to be submitted via a form)

I thought I could either place the text in a table or div and have an onaclick event that would swap the text for a textbox. However, all of my attempts to do this have come up short. The closest I can got was using a label and adding a checkbox next to every piece of text and when that was click the textbox appeared above the text. However, I was having difficulties implementing that solution elegantly to automate this with specific text. Any suggestions/help would be greatly greatly appreciated.

**jscheuer1** · 07-23-2005, 09:15 AM

Is this what you had in mind?

HTML Code:

<html>
<head>
<title>Span to Text Box - Demo</title>
<style type="text/css">
.replace {
display:none;
}
</style>
<script type="text/javascript">
function exchange(id){
var ie=document.all&&!window.opera? document.all : 0
var frmObj=ie? ie[id] : document.getElementById(id)
var toObj=ie? ie[id+'b'] : document.getElementById(id+'b')
toObj.style.width=frmObj.offsetWidth+7+'px'
frmObj.style.display='none';
toObj.style.display='inline';
toObj.value=frmObj.innerHTML
}
</script>
</head>
<body>
<span id="itm1" onclick="exchange(this.id)">House</span><input id="itm1b" class="replace" type="text" value="">
</body>
</html>

**jscheuer1** · 07-24-2005, 08:22 AM

Or, how about this?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Span to Text Box - Demo - DOM</title>
<script type="text/javascript">
/* © John Davenport Scheuer */
function exchange(el){
var nodeI=el.parentNode, inputC=document.createElement('input'), text=el.innerHTML;
el.style.font='.9em "ms sans serif", "sans"'
el.innerHTML+='\x20'
with (inputC){
setAttribute('value', text, 0)
setAttribute('size', text.length-1, 0)
style.width=document.all&&!window.opera? el.offsetWidth-2+'px' : el.offsetWidth+2+'px'
setAttribute('type', 'text', 0)
setAttribute('id', el.id, 0)
setAttribute('readonly', true, 0)
}
nodeI.replaceChild(inputC, el)
}
</script>
</head>
<body>
<span id="itm1" onclick="exchange(this)">House</span><br>
<span id="itm2" onclick="exchange(this)">SpantoTextBox-Demo</span><br>
<span id="itm3" onclick="exchange(this)">Span to Text Box - Demo exchange(this)</span><br>
<input id="itm4" type="text" value="Existing Text Box"><br>
<span id="itm5" onclick="exchange(this)">In Line Test</span>
<span id="itm6" onclick="exchange(this)">In Line Test Too</span>
<span id="itm7" onclick="exchange(this)">In Line Test Also</span>
</body>
</html>

**Side Effect Admin** · 01-12-2008, 09:42 AM

Is there a way to change it back onDoubleClick or body onClick, i am making a site for my band and i am making a login form using this script, if there is a way can you please email it to me at side.effect@hotmail.co.uk
Thanks,

Vinny

Originally Posted by jscheuer1

Is this what you had in mind?

HTML Code:

<html>
<head>
<title>Span to Text Box - Demo</title>
<style type="text/css">
.replace {
display:none;
}
</style>
<script type="text/javascript">
function exchange(id){
var ie=document.all&&!window.opera? document.all : 0
var frmObj=ie? ie[id] : document.getElementById(id)
var toObj=ie? ie[id+'b'] : document.getElementById(id+'b')
toObj.style.width=frmObj.offsetWidth+7+'px'
frmObj.style.display='none';
toObj.style.display='inline';
toObj.value=frmObj.innerHTML
}
</script>
</head>
<body>
<span id="itm1" onclick="exchange(this.id)">House</span><input id="itm1b" class="replace" type="text" value="">
</body>
</html>

**jscheuer1** · 01-12-2008, 11:09 AM

Code:

<html>
<head>
<title>Span to Text Box and Back- Demo</title>
<style type="text/css">
.replace {
display:none;
}
</style>
<script type="text/javascript">
function exchange(el){
var ie=document.all&&!document.getElementById? document.all : 0;
var toObjId=/b$/.test(el.id)? el.id.replace(/b$/,'') : el.id+'b';
var toObj=ie? ie[toObjId] : document.getElementById(toObjId);
if(/b$/.test(el.id))
toObj.innerHTML=el.value;
else{
toObj.style.width=el.offsetWidth+7+'px';
toObj.value=el.innerHTML;
}
el.style.display='none';
toObj.style.display='inline';
}
</script>
</head>
<body>
<span id="itm1" onclick="exchange(this);">House</span><input ondblclick="exchange(this);" id="itm1b" class="replace" type="text" value="">
</body>
</html>

**Side Effect Admin** · 01-12-2008, 11:42 AM

Thanks, mate....

**Hashmat** · 03-28-2008, 12:28 PM

Hi John...

i have tried ur code and its working fine.

I have a problem similar to this.I have a input button to insert a new row at a perticular index(3) into my html table.In that row i have four fields i.e two labels(span) and two textbox.this row is being generated dynamically using DOM.upto this i am able to do.

what i want is when i will click on the dynamically generated span or text ,it will convert to textbox and when double clicking the same will chane to text as u have done in ur code.

can u plz post or send me the solution to achieve this or any links which can address this issue.this is urgent.

my e-mail id is:hashmat.a@gmail.com

thanx in advance.

**jscheuer1** · 03-30-2008, 03:58 PM

I'm not familiar with "DOM.upto" and Googling it didn't appear to return any relevant results. However, when creating an element via the DOM, generally one does something like:

Code:

var el=document.createElement('span');

followed by whatever attributes and events. There are various ways to assign events and other things (an id is required - following the pattern that the function requires, in this case). The direct method would be best for this (the exchange) function:

Code:

var el=document.createElement('span');
el.id='itm1';
el.onclick=function(){exchange(this);};

for an input:

Code:

var ip=document.createElement('input');
ip.type='text';
ip.id='itm1b';
ip.ondblclick=function(){exchange(this);};

Then you can append each of these wherever.

**tonyking** · 03-31-2008, 02:30 PM

I love this idea, and I could use it on one of my sites. One concern I do have with it though, is what if the user disables javascript? It looks as though, in both scripts, anyone who disables javascripts would never be able to see the forms. Any way around this?