SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question onBlur issue -- needs suggestions

    I'm getting conflict (if it is) on the input field events.
    What I need: Is when onClick event, the class/style changes and onBlur the class returns back to its original display. Onchange of value, the class change to another color.
    The problem: When I add onBlur, the onChange class is being ignored and never displayed.

    Is there another way to do this? You're inputs are greatly appreciated.

    The code:
    <html>
    <head>
    <style>
    .editableCell
    { background-color: #EFF7FD; border: 1px solid #EFF7FD;
    text-align: right; padding: 0px; margin: 0px; font-family: arial; font-size: 11px; height: 18px;
    font-weight: lighter; color: #000; line-height: 18px; hspace: 0px; vspace: 0px; }
    .dataModified
    {background-color: #BDDAFC; border: 1px solid #BDDAFC;
    text-align: right; padding: 0px; margin: 0px; font-family: arial; font-size: 11px; height: 18px;
    font-weight: lighter; color: #000; line-height: 18px; }
    .dataHover
    {background-color: #FFF4CC; border: 1px solid #FFBD69;
    text-align: right; padding: 0px; margin: 0px; font-family: arial; font-size: 11px; height: 18px;
    font-weight: lighter; color: #000; line-height: 18px; }
    </style>
    </head>

    <body>
    Change the value:
    <br>
    Without onBlur:
    <input name="oEditCell" type="text" id="oEditCell" class="editableCell" value="0.00" onClick="this.className='dataHover';this.select();this.focus();" onchange="this.className='dataModified';" onKeyUp="this.className='dataHover';" />
    <br>With onBlur:
    <input name="oEditCell" type="text" id="oEditCell" class="editableCell" value="0.00" onClick="this.className='dataHover';this.select();this.focus();" onBlur="this.className='editableCell';" onchange="this.className='dataModified';" />
    </body>
    </html>

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not 100&#37; sure I know what you're trying to accomplish. The onchange event fires *before* the onblur event - no matter what order you put them in. So, you're running into an issue where the className changes twice in rapid succession.

    My recommendation is to just use one or the other - but pass a javascript function to make the decision on the classname.

    Also...on a side note...my suggestion would also be to avoid using inline event handlers and move toward a more unobtrusive approach. You'll find your code is easier to maintain when JS is used to enhance the code rather than make your page depend on it.

  3. #3
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jtrelfa, thanks for the inputs. I'll try to do the JS function and see if I get an issue again.


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
  •