Combobox
A text and listbox combo element triggered by a right
click mouse action
Introduction
Today there are many solutions available for Comboboxes, be it that they are
generally just a simple dropdown (pulldown menu). Combobox though, is a derivative
of "combination box", which is the combined use of text and selection
elements thereby enabling user entry or selection. This enables an users entry
to be made from a predefined selection list but if the case should exist where
none of these apply the users can input their own entry. In HTML terms this
this means a
combination of a select element and an input type="text" element. With
HTML you can only include these elements as two separate, mutually independent
constructs but with the use of Javascript code you can dynamically modify the
form so that the
two elements act as one, a Combobox.
Background
The combobox presented here is different from the mass of available web solutions
in that instead of using a button to make a selection the dropdown, listbox,
menu is triggered by a right click mouse button action. To make your own entry
left click the textbox and enter your input. Otherwise right click to make
a selection from the listbox, left clicking the textbox can be used to collapse
the listbox when the user does not wish to make a selection. The submit button
in this example displays an alert message showing the entry, if any, the user
has made.
This is how it looks like on your browser:
About the code
A mousedown event on the Form Textbox triggers the javascript function MouseBtnDown.
Depending on the browser type this function determines which mouse button has
been activated and takes no further action unless it is the right mouse button.
In ignoring left and middle button actions, the textbox enables a user entry
to be made. For a right mouse click the position of the Textbox element is
found by calling the
function FindPosition. FindPosition returns
a 2 element array, element 0 is the "X" (left) and element 1 the "Y" (top)
coordinate
of the the textbox. Based on these coordinates the listbox, whose visibility
style is currently hidden is set visible and positioned relative to the textbox.
Once visible a selection of one of the entries can be made from the listbox,
this selection calls the function AddToTextbox which adds the
selected item to the textbox and returns the listbox
to a hidden status. Equally a left and middle mouse click through
the function MouseBtnDown sets the listbox to hidden as does any
textbox key action through the function KeyDown.
Finally, right mouse clicks tend to be the domain of the current application
you are running, which provides a context based menu. Much internet information
exists on how to totally disable right clicks but in our application
we
just need to disable right clicks on the textbox. This is simple to implement
by using an onContextmenu event within the input type="text" (textbox)
form tag - onContextmenu="return false;".
 |
