Add textbox to editable div problem

Expand Post »

I am having a problem with a javascript script.

Add this code to an html file if you wanna try it.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<html>
<head>
<script>
var n = 0;
function addtb(){
	document.getElementById('TextEditor').focus();
	cmd = 'InsertInputText';
	document.getElementById('TextEditor').document.execCommand(cmd,'true');
	document.getElementById('TextEditor').blur();
 
 
	var TE = document.getElementById('TextEditor');
	var TEcn=TE.children;
 
	for (i=0;i<TEcn.length;i++) 
	{
		n++;
		if(TEcn[i].id == "")
			TEcn[i].id = "tb" + n;
 
	}
}
function tellids(){
	var TE = document.getElementById('TextEditor');
	var TEcn=TE.children;
 
	for (i=0;i<TEcn.length;i++) 
	{
		alert(TEcn[i].id);
 
	}
}
</script>
</head>
<body bgcolor=dddddd>
<div  id="TextEditor" contenteditable="true" indicateeditable="true" 
style="BACKGROUND-COLOR:white;OVERFLOW: auto;WIDTH: 600px;HEIGHT: 500px;WORD-WRAP: break-word"></div>
<input type=button onclick="addtb();" value="add a text box">
<input type=button onclick="tellids();" value="alerts of textbox ids">
<br>
 
After you add your first textbox to the editor, you need to unselect it to be able to add another textbox with only one click of the button.
If you dont, you will have to doubleclick the button, and I dont want that.
I would like the selected textbox to be blurred and then add another textbox with a single click of the button.
 
</body>
</html>
<html>
<head>
<script>
var n = 0;
function addtb(){
	document.getElementById('TextEditor').focus();
	cmd = 'InsertInputText';
	document.getElementById('TextEditor').document.execCommand(cmd,'true');
	document.getElementById('TextEditor').blur();
	

	var TE = document.getElementById('TextEditor');
	var TEcn=TE.children;

	for (i=0;i<TEcn.length;i++) 
	{
		n++;
		if(TEcn[i].id == "")
			TEcn[i].id = "tb" + n;

	}
}
function tellids(){
	var TE = document.getElementById('TextEditor');
	var TEcn=TE.children;

	for (i=0;i<TEcn.length;i++) 
	{
		alert(TEcn[i].id);

	}
}
</script>
</head>
<body bgcolor=dddddd>
<div  id="TextEditor" contenteditable="true" indicateeditable="true" 
style="BACKGROUND-COLOR:white;OVERFLOW: auto;WIDTH: 600px;HEIGHT: 500px;WORD-WRAP: break-word"></div>
<input type=button onclick="addtb();" value="add a text box">
<input type=button onclick="tellids();" value="alerts of textbox ids">
<br>

After you add your first textbox to the editor, you need to unselect it to be able to add another textbox with only one click of the button.
If you dont, you will have to doubleclick the button, and I dont want that.
I would like the selected textbox to be blurred and then add another textbox with a single click of the button.

</body>
</html>

After you add your first textbox to the editor, you need to unselect it to be able to add another textbox with only one click of the button.
If you dont, you will have to doubleclick the button, and I dont want that.
I would like the selected textbox to be blurred and then add another textbox with a single click of the button.

If anyone could help, I would really appreciate it.

thx

Similar Threads

Ideas for final year multimedia project in IT Professionals' Lounge
separating line by line from textbox with textmode=multiline in ASP.NET
Have a problem with centering "jpg" files in HTML and CSS
retrieving ids from dynamically created controls in asp.net in ASP
more problem!!!! in Windows Software

belama

Reputation Points: 19

Solved Threads: 2

Posting Shark

Offline

962 posts
since Mar 2005

Permalink

Apr 8th, 2005

Re: Add textbox to editable div problem

You need to empty the current selection range.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
function addtb()
{
  document.selection.empty();
  document.getElementById("TextEditor").focus();
  cmd = 'InsertInputText';
  document.getElementById('TextEditor').document.execCommand(cmd,'true');
 
  var TE = document.getElementById('TextEditor');
  var TEcn=TE.children;
 
  for (i=0;i<TEcn.length;i++)
  {
    n++;
    if(TEcn[i].id == "")
    TEcn[i].id = "tb" + n;
  }
 
}
function addtb()
{
  document.selection.empty();
  document.getElementById("TextEditor").focus();
  cmd = 'InsertInputText';
  document.getElementById('TextEditor').document.execCommand(cmd,'true');

  var TE = document.getElementById('TextEditor');
  var TEcn=TE.children;

  for (i=0;i<TEcn.length;i++)
  {
    n++;
    if(TEcn[i].id == "")
    TEcn[i].id = "tb" + n;
  }

}

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

Permalink

Apr 8th, 2005

Re: Add textbox to editable div problem

Thanks. So simple and it works.

belama

Reputation Points: 19

Solved Threads: 2

Posting Shark

Offline

962 posts
since Mar 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Making web site fill browser screen

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Sort Tables...

DaniWeb Message

Cancel Changes

User Name
Password