onfocus/onblur problem 1

[cornboy88]

I have a input(file) box that is loaded with the web page with a button to dynamically add more input boxes. I want to change the color of the background of the input boxes when they have focus. the input box that is static works fine in IE7 but not FF3. When the add button is clicked the boxes are created, but the onfocus/onblur event do not work. Am I over looking something?

<p id="upload-area">
                <input id="File1" type="file" runat="server" size="60" onfocus="boxFocus(this.id)" onblur="lostFocus(this.id)"/>
            </p>
            <input id="AddFile" type="button" value="Add file" onclick="addFileUploadBox()"/>
            <p>
                Username:<asp:TextBox ID="TextBox1" runat="server" onfocus="boxFocus(this.id)" onblur="lostFocus(this.id)"/>
                Password:<asp:TextBox ID="Password1" TextMode="password" runat="server" onfocus="boxFocus(this.id)" onblur="lostFocus(this.id)"/><br />
                <br />
                <asp:Button ID="btnSubmit" runat="server" Text="Upload Now" OnClick="btnSubmit_Click" /></p>
            <span id="Span1" runat="server" />
            <img src="images/space.jpg" alt="" width="613" />

            <script type="text/javascript">
                function boxFocus(x) {
                    document.getElementById(x).style.background = 'rgb(133, 114, 45)';
                }
                function lostFocus(x) {
                    document.getElementById(x).style.background = 'white';
                }
                function addFileUploadBox() {

                    if (!document.getElementById || !document.createElement)
                        return false;

                    var uploadArea = document.getElementById("upload-area");

                    if (!uploadArea)
                        return;

                    var newLine = document.createElement("br");
                    uploadArea.appendChild(newLine);

                    var newUploadBox = document.createElement("input");

                   
                    // The new box needs a name and an ID
                    if (!addFileUploadBox.lastAssignedId)
                        addFileUploadBox.lastAssignedId = 2;

                    newUploadBox.setAttribute("id", "File" + addFileUploadBox.lastAssignedId);
                    newUploadBox.setAttribute("onfocus", "boxFocus(this.id)");
                    newUploadBox.setAttribute("onblur", "lostFocus(this.id)");
                    newUploadBox.setAttribute("type","file");
                    newUploadBox.setAttribute("size", "60");
                    newUploadBox.setAttribute("runat", "server");
                    uploadArea.appendChild(newUploadBox);
                    addFileUploadBox.lastAssignedId++;

                    if (addFileUploadBox.lastAssignedId == 6) {
                        document.getElementById("AddFile").disabled = true;
                        return;
                    }
                }
            </script>

 

[feherke]

Hi

JavaScript is about client-side scripting. So please post client-side code.


Feherke.

http://rootshell.be/~feherke/

 

[BillyRayPreachersSon]

Try changing this:

newUploadBox.setAttribute("onfocus", "boxFocus(this.id)");
newUploadBox.setAttribute("onblur", "lostFocus(this.id)");

to this:

newUploadBox.onfocus = function() { boxFocus(this.id); };
newUploadBox.onfocus = function() { lostFocus(this.id); };

Hope this helps,
Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Oops - the "onfocus" in line 2 should be "onblur"...

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]