This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?
Is it possible to open the drop down list of a Select element when the Select element gets focus?
I know it automatically focuses when you click it ... but I want it to work when you tab it too.
Unfortunately the answer for your question is simply "No, its not possible with the current HTML and Javascript controls"
However, if you use jQuery and this plugin (https://github.com/fnagel/jquery-ui/wiki/Selectmenu) for select menus i believe you could do :
$("#idofSelect").selectmenu("open");
Also another alternative for your idea, but maybe not as fancy:
document.getElementById("idOfSelect").setAttribute("size", 5);
What this does is simply make it a multiline select, so in some way it displays the options...
You could do this on focus, and then do another event on click where you reset its size to 1 and stop the event propagation (so that onfocus doesn't get called after..)
but like i said, this is THAT professional, so either live with your select the way it is, or switch to jQuery select menus and have fun opening and closing them dynamically at your will :)
As a starting point, if using JQuery you could use the trigger function eg If your select box has an id of "names" simply call $('#names').trigger('click');
Related
This question already has answers here:
Programmatically make datalist of input[type=url] appear with JavaScript
(2 answers)
Closed 2 years ago.
I have a datalist. Its list is empty at the beginning. I use javascript to append the options to that list and want to show the list immediately without clicking it manually. I may need to use javascript code to implement this. Could anyone know how to do this? Thanks in advance! By the way, document.getElementById("element").focus(); This doesn't work. It can only move the mouse to the input area but can't show the list. I want to show that list.
We need to create the "append the options to that list" function.
I think we can create that function based on the behavior of the click, and then run it after the page loads.
This question already has answers here:
jQuery change input type=text to textarea
(4 answers)
Closed 4 years ago.
How can I make an INPUT field dynamically change itself into a TEXTAREA in the browser, based on certain conditions (like the amount of text in it), without any extra logic server-side?
I have not tried anything yet, because I don't want to reinvent the wheel. I searched SO and found nothing. I'm looking for something like:
$('#myinputfield').automatically_morph_input_type_based_on_contents();
I doubt you'll find anything that is already prebuilt.
A simple thing you should consider is that, whether you really need an input or a textarea. And if you still think you need to switch between the too then you'll just have to dynamically create the two.
First remove the old element, create the new element, use the value, id, name and other attributes from the old element. Apply the same process for the next change.
This question already has answers here:
How to style the browser's autocomplete dropdown box?
(2 answers)
Closed 9 years ago.
Defaultly, when you input something to text field, you get suggestions with values you entered before. So my question is, is it possible to use CSS to modify appereance of that suggestion dropdown. Or could you please suggest javascript code to recreate its bahavior?
No, it is browser's native implementation. the browser doesn't even add or modify any new DOM element therefore you can not style the dropdown list. I am not 100% sure but it looks like the drop down list is on a different layer on top of the display page. You will need to have a your own Javascript implementation of autocomplete.
By the way to disable this browser behavior, add this to the input element:
autocomplete="off"
Note that not all browser support autocomplete attribute
You can't fiddle with the native browser's autocomplete box, but you can with custom implementations. I'd wager the most popular is this one: http://jqueryui.com/autocomplete/
I should note that the custom implementation won't serve up values the user has entered before unless you are capturing each term the user is entering, and use that list to populate your autocomplete box.
This question already has answers here:
Use images instead of radio buttons
(10 answers)
Closed 8 years ago.
I want the functionality of a radio button, yet have the option of choosing based on an image. For example, I am going to have a label (Payment Methods). I would like to set up various DIV/Images with each accepted payment (Credit/card, PayPal, western union, etc). Instead of choose a small little circle radio button, id rather them just click the image and have a border or an image change to indicate that method has been chosen.
It would be even better yet if I could have this functionality with a DIV element, that way I can add just put whatever I want in the DIV (text, images, etc) and have the DIV itself have some sort of border that appears on selection.
Is this possible using input type=radio? If this isn't possible using radios, than how you would suggest the implementation of this? If this has been implemented please link :)
It is not possible to directly style the checkbox or radio button, however, what I do in these situations is I make my own custom checkbox, using jQuery, and based on the user selection, I do one of two thigs:
1) Change the value of a hidden field,
2) Change the value of a checkbox that DOES exist, but that is not displayed to the user, so display:none; would be applied to it.
It is quite simple, make you checkbox out of a div even, lets say 15px high and 15px wide, and bind click events to it using jQuery. You can then toggle the class each time it is clicked, which in turn gives you freedom over styling it, and based on the class or click state, you can assign the actual checkbox value to your hidden field or hidden check box.
Does this help?
A good resource for this is:
http://www.filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/
Or if you'd have a plug-in do the work:
http://plugins.jquery.com/taxonomy/term/1360
I'm testing TagDragon jQuery plugin, it's exactly what I need, but is has one annoying "feature", when I click the scrollbar in the suggestion list, it hides it's results. On the other hand jQuery autocomplete plugin doesn't lose the focus on the input field and that's why it doesn't hide its results. But that plugin doesn't provide the functionality I need, so I can't just replace tagdragon.
I've studied jQuery autocomplete code and I can't understand how they keep the focus on the input field, I just can't find the code responsible for that!
So the question of the day is: How to keep the focus on the input when using the scrollbar in the result suggest list?
P.S. Also I have a question of how jQuery autocomplete plugin does it, because it looks like magic to me after studding the code for an hour.
I just asked a similar question, and nobody answered it, so I basically tweaked my own code until I figured out a working solution.
After investigating some of the other pickers out there, I realized that the trick is not to add an event that closes the list on blur, instead simulate a blur event by checking other possibilities by doing the following:
upon the opening of the list, add a click event to the document that
checks to see if the click is not on in the active input, and not on
the active list. If this is true and the click is in fact on a non-listy
part of the document, then close it.
add an event to each list item in the suggest list (when the list is
open only) that selects the value and closes the list.
add an keydown event to the input itself so if the user hits enter,
it changes the value and closes the list.