• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 258
  • Last Modified:

can't blur the focus on a <select> drop-down list

Hello-

I need to control the appearance of a disabled drop-down list, but I'm not having any luck creating the read-only effect.  Here is the code I generate (via my asp.net 1.1 app), and at least in IE I can still change the selection:

<select name="job:rep" id="job_rep" onfocus="this.blur();">
            <option value="65">Adam Parrish</option>
            <option value="18">Alan Goldstein</option>
            <option value="22">Anna Dominguez</option>
            <option selected="selected" value="32">Greg White</option>
</select>

I have also tried the following, with the same result:

<select name="job:rep" id="job_rep" onfocus="javascript:this.blur();">
<select name="job:rep" id="job_rep" onfocus="function preventFocus(e) { this.blur(); }">

Thanks for any help-

Mike
0
ottenm
Asked:
ottenm
  • 4
  • 4
1 Solution
 
DireOrbAntCommented:
I suppose you could focus the next element (or previous) as in:
<input type="text">
<select name="job:rep" id="job_rep" onfocus="document.getElementById('AfterSelect').focus()">
          <option value="65">Adam Parrish</option>
          <option value="18">Alan Goldstein</option>
          <option value="22">Anna Dominguez</option>
          <option selected="selected" value="32">Greg White</option>
</select>
<input id="AfterSelect" type="text">
0
 
ottenmAuthor Commented:
Better, but a bit awkward.  When I click on the drop-down, it starts to open and display the list, and then all of a sudden closes and moves the focus the the next element.

A fix though, so thanks!
0
 
ottenmAuthor Commented:
Wups, you can still edit the drop down.  If you double-click instead of single click, the second click catches the dropdown and then you can drag up/down through the list.  When you let go, the control has the focus and the new value is selected.

Should I start a new thread with this since I already awarded the points?
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
DireOrbAntCommented:
Why don't you use this:
<select name="job:rep" id="job_rep" DISABLED>
0
 
ottenmAuthor Commented:
No control over the appearance (browser chooses foreground/background colors).
0
 
DireOrbAntCommented:
<input type="text">
<select name="job:rep" id="job_rep" onfocus="document.getElementById('AfterSelect').focus()" onchange="this.selectedIndex = PreviouslySelectedItem">
          <option value="65">Adam Parrish</option>
          <option value="18">Alan Goldstein</option>
          <option value="22">Anna Dominguez</option>
          <option selected="selected" value="32">Greg White</option>
</select>
<input id="AfterSelect" type="text">

<SCRIPT TYPE="text/javascript">
var PreviouslySelectedItem = document.getElementById('job_rep').selectedIndex;
</SCRIPT>

Make sure the script block goes into a BODY onload.
0
 
ottenmAuthor Commented:
I'll buy that!  Thanks DireOrbAnt!
0
 
DireOrbAntCommented:
Sold!
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now