I have an input and a checkbox, when the input is focused it display some information under it.
The problem is : when those information are displayed if I click on the checkbox it hides the information (because my input is not focused anymore) but the checkbox is not checked.
Here is a working plunker which reproduce this behavior.
Is there a way to make the checkbox checked in this scenario ?
EDIT :
I think the problem is because the input loose the focus on the event mousedown and the checkbox is checked on the event mouseup (or maybe click) so when the mouseup event is fired the input has already lost the focus so the message under it is hidden and the checkbox moves up. So when the mouseup event is fired the cursor is not anymore on the checkbox, that's why the checkbox is not checked.
Nothing in pure CSS. You would need to bind focus event on JS.
Something like this:
var input = document.querySelector('#input');
input.addEventListener('focus', function() {
this.classList.add('focus');
});
And then change your CSS from :focus to .focus
My solution for your question is attached here. This is a simple way. I have added JQuery code to it. You can try this code. I have written this code using JSFiddle. The link is given below:
[https://jsfiddle.net/679g9p6p/1/][1]
If you want to hide the information when focus out from the textbox, then you can try this code given below:
[https://jsfiddle.net/xxsL2e03/100/][2]
Related
The use of :checked state to define the action for clicked event is handy but is there a way to return to the unchecked or the normal state if we click else where in the window.
That is a job of JavaScript, to change the element's state upon a change in some other element's event. CSS was never designed or developed to handle this type of situation.
You can use the blur event of the checkbox, to uncheck it. Like this
$('input[type=checkbox]').blur(function () {
$(this).prop('checked', false);
});
..upon focus it will be checked and once the mouse is out of the focus (checkbox is not in focus) then it will be unchecked.
http://api.jquery.com/prop/
I wonder whether it is possible to disable a form element or a set of form elements with the 'reset' button. In detail: I have a form with checkboxes and associated dropdown lists ('select' elements with size=1). When I check one of the checkboxes, the correspondent dropdown is enabled. When I uncheck the box, the correspondent dropdown is disabled.
But when I click the reset button, all checkboxes are unchecked automatically while the correspondent dropdowns still remain enabled. Is there another option to disable them beside of writing an own function which would iterate on the dropdowns disabling each of them and assigning this function to the 'onreset' event of my form?
Kind regards
Ewgenij
you mean something like this?:
$('#reset').click(function(){
$("#target input").prop("disabled", true);
});
Well, to disable a form without unchecking it the function works. See here
But maybe I understood wrong. In that case some code of the author would be useful.
You just need to run a JavaScript function after the form resets.
That is, track the state of the elements in hidden fields, and use those values to either disable or enable after the reset.
The code for disable is simple enough.
document.getElementById("[form element ID]".disable = true;
I'm trying to work around a webview issue on Android devices using Select drop down menus, using instead radio buttons in a popup to make user selections
What I need though is for the button text to change according to the selection the user has made. I've put togetaher a Fiddle of what I thought would work, but it's not playing ball, and I was wondering if any wiser heads out there could offer some advice.
Fiddle here;
http://jsfiddle.net/vinomarky/gEXhD/
Note: I've currently added some alerts in there when the javascripts fire, but they are not firing, and am not sure why not.
Question 1:
How to change the button text to match the user selection
Question 2:
How to make the radio selection minimize as soon as a user has made a selection, without having to click off the radio
Thanks in advance
you can use jquery click event instead of using onclick attribute
because you use jquery mobile ui, to change button text you should change button text container value not pressure_cands itself
and to hide popup screen when an item selected call click event of popupBasic-screen div
$('#updown1').click(function(){
// to change button label
$('#pressure_cands .ui-btn-text').html('THP');
// call popupBasic-screen click event to hide popup menu
$('#popupBasic-screen').click();
});
$('#updown2').click(function(){
// to change button label
$('#pressure_cands .ui-btn-text').html('FBHP');
// call popupBasic-screen click event to hide popup menu
$('#popupBasic-screen').click();
});
http://ano-mag.com/black-foil/ please check this url - click the "Order Now" button on the left side - notice how the radio buttons won't work? I cant figure it out!
I reproduced the faulty behavior on your fiddle, it's due to this block of code:
$('.ano-box').click(function(e) {
e.stopPropagation();
return false;
});
Which prevents the click event from bubbling up the DOM to your radio buttons. =]
Complementary edit:
Your text inputs still gain focus in the faulty scenario because text inputs gain focus in the mousedown event, which is properly executed as it fires before the click event. The radio inputs, however, are checked in the click event which is being cancelled by your function. =]
Is there a way to capture the events triggered on HTML controls before they are forwarded for default (generic) handling by the control itself. In my case, I want to prevent a element dropdown to open when a user clicks on the control. e.g. On this user click, OnClick() event gets fired and is handled by the default control which open the dropdown. I want to stop this from happening.
Can I attach a custom function to this event and redirect the event handling to this one instead of the default code that opens the dropdown?
Thanks
onclick,onmousedown and onmouseup will not help you to prevent the selectbox from opening. I'm not asking why you want to do that, but if you really can't use any other solution, like for example (changing selectbox to the readonly inputbox), then, you can try the next solution.
One way to prevent the box from opening, is to create an overlay container, which will block the the focusable area of the select. This can be achived by placing the div after the selectbox and givving it the sizes and the position of the selectbox.
<div style="position:relative;">
<select style="width:100px;height:30px">
<option>hello</option>
</select>
<div style="position:absolute;
left:0;
top:0;
width:100px;
height:30px;
z-index:2;
background-color:black;
opacity:0;filter:Alpha(Opacity='0');"
></div>
</div>
Event then, it will work only for IE >= 7. Not for IE6, cause selectboxes in IE6 are strange( maybe you can try to fix IE6 with some iframe hack);
Fairly old question with some good suggestions, but none seem to directly answer the original question. In case anybody out there is wondering, I believe the OP was wanting to keep the visual appearance of the system/browser select element, but use his own custom drop-down menu instead of the system/browser drop-down menu.
In this case, the onclick event will occur too late for you to stop the actual drop-down menu from displaying. What you want to do is bind to the mousedown event, and prevent the event from propagating to the default behavior:
document.getElementById('my_select_id').onmousedown = function(event) {
// ... do something here...perhaps display your own custom menu, an advanced selection chooser, focus another element, display a message, or some other custom handling.
event.preventDefault(); // This prevents the drop-down menu from displaying
}
Notes:
Replacing the drop-down with a custom-designed element (as suggested by others) isn't always an option. In some cases, you'll end up either having to completely omit default/system drop-downs from your site (in favor of a custom-designed element), or you have to live with a mismatch in visual appearance due to browser/system/theme differences (unless you feel like designing the custom element to match every conceivable visual aesthetic/theme.)
Disabling the drop-down will not work, as it will prevent the event handlers from firing.
Using optgroups will still allow the drop-down menu to be displayed.
Replacing the drop-down with an empty version will still display an empty drop-down menu.
This is the answer I gave on another, similar question.
This works great for me in IE and Chrome, there's no flicker or anything:
html
<select id="MySelect"><option>Hello</option></select>
js
MySelect.onmousedown = function ()
{
window.setTimeout(function ()
{
//- An immediate blur, then refocus stops the options from being displayed
this.blur();
this.focus();
//- so now we run our custom function
runOtherFunctionInstead();
},0);
}
Make sure the js runs after the select element has been parse by placing it in an onload or ondocumentready or a script block after the select element. Haven't tried it in Firefox or Opera. Assumedly it would work in Safari, though.
EDIT
As suggested in the comments, the popup will still appear for a double click in IE (all versions). This is due to a bug where the mousedown event doesn't fire for the second click (whoops). You can quickly hide the options again by using the blur, focus method in the ondblclick event and if this method works in Firefox and Safari, I still think it's the best solution considering most people don't double click select boxes.
you need to set selectbox to be onload disabled: disabled="disabled"