Partially select checkbox with javascript - javascript

Is there a way using Javascript and HTML(5) to make a checkbox be partially selected, like the checkboxes in a program installation menu when you select only some of the sub options?

HTML5 defines the indeterminate boolean property.
I've tested it only in the latest Safari, Chrome, and Firefox. They all support the indeterminate state.
Example: http://jsfiddle.net/5tpXc/
Edit: Note that this wont work with older browsers and maybe not with current versions of IE. You'd need to rely on hacks as described in other answers here if you want to support all browsers.

HTML checkboxes (that is, input elements of type checkbox) don't have a third state (partially checked). So no, there is no direct way to do this.
What you'd probably have to do is make a custom checkbox-looking image and bind to its various events (click, for example) to store its current "state" in a hidden form field via JavaScript. You may run into a number of issues with this approach, though.
For example, keyboard navigation of the form may not be possible for this particular element. (Can one tab to an image and send it keyboard events? I'm not sure.)
Additionally, you could try manipulating custom attributes on a checkbox element via JavaScript to store a third state. But the rendering of the element itself has no visual indicator of something like that. You could probably manipulate its style (color, background color, border color, etc.) to try to mimic the visual behavior. But you may not be able to achieve the exact visual style that you're using for reference.
It's certainly an interesting prospect, and I'm intrigued enough that I may try to implement something like this in the near future. But with a native checkbox element, it's not possible. It has only two states.
Edit: Refer to #kassens' answer for doing this in HTML5. If you're limited to previous versions of HTML for any reason, then it's going to have to be a hack as described here. But if you can rely on users supporting HTML5, then it looks like native support is there.

Nope. You would have to make a custom checkbox graphic and fake it.
Edit: Refer to #Kassen's answer for a way to have partially checked boxes in HTML5-compliant browsers.

Related

Should I use HTML attributes or classes to specify state on input fields?

My problem is a bit more complicated than this, but essentially when the user changes something on the page I would like to mark that field as "dirty" in some way and use a confirm box to ensure the user actually wants to leave the page before losing changes.
I can't use a global "something changed" variable in this case because of the need to add/remove it on certain items based on other events that occurred.
The answer to the question in the subject should take multiple things into account:
General best practices - if such a thing exists for this stuff
Lookup speed - I've seen in many places that class names are faster
Browser compatibility - no super-fancy HTML5/CSS3 whizzbang features, please. I need this solution to work in IE7+, Firefox, Chrome, and Safari. Not too worried about versions on the non-IE browsers.
Basically, I have some jQuery code that looks like this:
$(":input").on("change", function(event) {
// set something on $(this) to hold state for this item
// $(this).addClass("my-dirty-flag");
// or
// this.setAttribute("data-dirty-flag", "data-dirty-flag");
});
Which option is "better" and why?
One thing that made me even consider asking this is that AngularJS seems to use properties on tags to do this sort of thing.
I would use classes for that purpose, because you can look them up with native JS code. Looking for data-* attributes is a much heavier operation, since JavaScript will have to loop through all element attributes. You can check other posts to back me up, like the following:
jQuery select by class VS select by attribute

Removing Browser Readonly Styles

I am trying to disable user text input in a text field, and am using the readonly="true" attribute on the input itself.
However, I don't want it too look different then a default input field. I'm am trying to write a solution that will not make me go in and write CSS for it, as browsers may change their styling and make this miserable.
Is there any way to just remove the browsers readonly style?
Here's a screenshot I'm talking about. The one on the right is readonly, but I want it to look the same as the one on the left.
Browser styles are by definition browser-specific, so any solution would be browser-specific. You would need to study the browser defaults (from documentation or via experimentation) and to serve different styles to different browsers. A lot of work, and I don’t quite see what the potential benefit might be. It would in general be bad for usability to remove the distinction between normal and disabled fields.
You can set the style explicitly to be the same for normal and disabled fields, but then you won’t get browser defaults.

Open dropdown from javascript

I there ANY way in javascript that we could trigger a select element (dropdown list) to open (i.e. drop)?
After searching alot on the web, it seems the answer to this question is no, but I decided to give it a try on here as well.
I know there are some css tricks that you can set the opacity of your select to 0 and place it over other elements to receive click, but that is not useful in my case.
Also there are tons of js APIs that bring the same dropdown functionality to browsers but they are not good solutions for me because then on mobile browsers (where the OS has a totally different mobile-friendly popup for dropdowns) the functionality would be seriously poor.
[Note] I specifically need to do this in an android browser, in case there is a hack for this special case.
Thanks.
You could assign a value to the size attribute. This causes the number of visible options to change. This simulates a "drop-down". Add position:relative to a container, and position:absolute to the select to prevent the element from pushing other elements away.
Demo: http://jsfiddle.net/HQwXj/

Cross-browser JavaScript input live change/paste detection

Is there a cross-browser way to detect live changes to an input field?
By live, I mean not when the field loses focus, and not on the next keypress, and so on. Immediately or something like it.
Using combinations of jQuery and .change(), .keyup(), .bind('paste') and so on I can get working live change detection in some browsers, but not all. Using different combinations will make it work somewhat in other browsers.
The trickiest thing to get working is mouse manipulation of the input field - selecting text and moving it (which is essentially cut and paste), right-clicking and pasting or cutting, etc. For some reason even .mousedown() and .mouseup() don't seem to cut it.
The only cross-browser solution I can think of right now is to check the input field value every 100-or-so milliseconds and compare the value against a stored value. But this seems like overkill when the event-based solution comes so close.
Is there a jQuery plug-in that does this already? Or is there some other way to achieve this?
To complete your change and key handlers, you can add handlers for cut/copy/paste. They work in Firefox >=3, IE, Safari and Chrome (but not in Opera/Konqueror).
Would that cover everything for your use case?
Depending on the Browsers you need to support you might use HTML5's oninput.
It fires immediately when the monitored input changes. In jQuery you would just do:
$('#my-input').bind('input', function(e) {
console.log("#my-input's value changed");
});

Testing jQuery change event using Watij

I have a select list where a change event has been bound to the element using jQuery. Something like this:
$("#someId").change(function() {..});
When someone chooses a new option in the select list, another part of the UI will change accordingly. Now this works fine when I use the mouse and click things, however, when using Watij to write my tests I need the jQuery change event to fire which it isn't doing.
The Watij test will correctly choose the select option required but the actual event does not get triggered. I have tried calling fireevent("change"); and fireevent("onchange"); to no avail. I have also tried ie.sendKeys("{ENTER}"); and ie.sendKeys("{TAB}"); which also does not seem to do the trick.
Any ideas?
The only solution I've found so far is to roll back the version of jQuery in use. I'm currently using version 1.4.1 (the offending version in regards to the testability of the change event on select boxes) and after going back to version 1.2.6 the problem goes away.
Use $('#someId').trigger('change'); to fire the event manually.
See the documentation for trigger().
When the combo/list value is changed with script the onchange is not supposed to fire. I don't know how Watij is doing that, but this is one case.
Second thing is that Watij is working with IE (as long as wikipedia is rght) and IE is putting a system control in place of Your list or combo and it might break something too. Try upgrading to IE8 which has a tiny bit better realisation of form components (eg. select finally supports "disabled" attribute in options after 10 years)
You might also be interested in a normal application GUI testing apps and use them on a browser with the webapp. Record a macro and check screenshots.

Categories