SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    text field value sticks once typed by user in ff even though tf's value being changed

    in firefox (1.5 and 2 mac), but not in safari, in a text field which has been typed into in anyway, on page reload by the user clicking the browser's reload button, the text field retains what the user typed even though from an on load handler function this is done:
    Code:
        var textfield = document.getElementsByName("postcode")[0];
        textfield.setAttribute("style", "color:#777");
        textfield.setAttribute("value", "Enter postcode");
    the text in the text field does turn to colour #777 but the text field's value does not change (in firefox).

    even if the user types something in the text field, then deletes it so there's nothing in it, clicks reload, the text field's value still isn't effected by the setAttribute value setting line.

    it's as if firefox has a "user has typed input so don't allow it to be changed from now on" flag on the text field.

    how to change the text field's value once someone has typed something?

    thanks.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    how is the onload handler being achieved?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    like this:
    Code:
    if(window.addEventListener)
    	window.addEventListener("load", runOnLoad, false);
    else if (window.attachEvent) window.attachEvent("onload", runOnLoad);
    else window.onload = runOnLoad;
    but that's not the problem i don't think because i put an alert in the runOnLoad function to check firefox was running it and it was.
    all the page's code is here: http://vm.ooh.uk.com/howfar/test.js
    the page itself: http://vm.ooh.uk.com/howfar/testy.php

    thanks.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Have you tried waiting until after the page is loaded, by using timeout from the onload event?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    i haven't. i'll give that a go. thanks.

  6. #6
    SitePoint Wizard
    Join Date
    Apr 2002
    Posts
    2,322
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Paul, the below code uses setTimeout from the onload handler. is that what you meant by "Have you tried waiting until after the page is loaded, by using timeout from the onload event?" ?

    the below code hasn't fixed the problem.

    html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<title>textfield reset test</title>
    </head>
    <body>
    
    <form action="#" method="post">
    <p>
    <input type="text" name="textfield" />
    </p>
    </form>
    
    <script type="text/javascript" src="textfieldresettest.js"></script>
    </body>
    </html>
    javascript:
    Code:
    if(window.addEventListener)
    	window.addEventListener("load", runOnLoad, false);
    else if (window.attachEvent) window.attachEvent("onload", runOnLoad);
    else window.onload = runOnLoad;
    
    function runOnLoad() {
    	setTimeout(outOfField,1000);
    	var textfield = document.getElementsByName("textfield")[0];
    	textfield.addEventListener("mousedown", function() {textfield.setAttribute("style", "color:#000"); textfield.setAttribute("value", ""); textfield.focus(); }, false);
    	textfield.addEventListener("blur", function() { if(this.value.replace(/\s/g,"")=="") outOfField(); }, false);
    }
    
    function outOfField() {
    	var textfield = document.getElementsByName("textfield")[0];
    	textfield.setAttribute("style", "color:#777");
    	textfield.setAttribute("value", "Text for textfield");
    	alert("After getting rid of this alert textfield should contain \"Text for textfield\"");
    }
    so this is the problem:
    user types something into text field, clicks browser reload button which triggers code which is supposed to fill the text field with a particular bit of text (oblitterating what the user type). this works correctly in safari but not firefox (on a mac at least). after the page reloads it still contains what the user typed (even if they typed something then deleted it so it's empty when they click reload), not 'Text for textfield' as it should.

    any ideas how to get firefox to do settAttribute('value', '...') on page reload ?

    above code on a page: http://vm.ooh.uk.com/howfar/textfieldresettest.html

    thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •