Add textbox to editable div problem

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 361,894 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,239 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 12511 | Replies: 2

•

Join Date: Mar 2005

Location: Ottawa, Ontario, Canada

Posts: 959

Reputation: belama is an unknown quantity at this point

Rep Power: 5

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

(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>

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,589

Reputation: tgreer is an unknown quantity at this point

Rep Power: 7

Solved Threads: 34

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

(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;
  }

}