AJAX

Add textbox to editable div problem

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Mar 2005

Posts: 960

Reputation: belama is an unknown quantity at this point

Solved Threads: 2

belama

Offline

Posting Shark

Add textbox to editable div problem

Apr 8th, 2005

I am having a problem with a javascript script.

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

 Help with Code Tags 
 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

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Add textbox to editable div problem

Apr 8th, 2005

You need to empty the current selection range.

 Help with Code Tags 
 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;
  }

}