DaniWeb IT Discussion Community - Add textbox to editable div problem

I am having a problem with a javascript script.

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

<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