Solved

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

Posted on 2006-07-20
8
242 Views
Last Modified: 2008-01-09
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
Comment
Question by:ottenm
  • 4
  • 4
8 Comments
 
LVL 26

Accepted Solution

by:
DireOrbAnt earned 250 total points
Comment Utility
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
 

Author Comment

by:ottenm
Comment Utility
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
 

Author Comment

by:ottenm
Comment Utility
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
 
LVL 26

Expert Comment

by:DireOrbAnt
Comment Utility
Why don't you use this:
<select name="job:rep" id="job_rep" DISABLED>
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:ottenm
Comment Utility
No control over the appearance (browser chooses foreground/background colors).
0
 
LVL 26

Expert Comment

by:DireOrbAnt
Comment Utility
<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
 

Author Comment

by:ottenm
Comment Utility
I'll buy that!  Thanks DireOrbAnt!
0
 
LVL 26

Expert Comment

by:DireOrbAnt
Comment Utility
Sold!
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now