The Question
How can I make a hidden div (triggered by radio button) show/hide for people that click it or tab through it in all browsers (Safari is my problem).
The Story
I have an html form with hidden div's scattered throughout to hide questions that might not need to be asked in some scenarios. Most of the hidden div's are triggered by radio buttons, so I decided to build the following script. I used .on("focus") so the hidden fields will work for people tabbing through the form.
$("#loan-application").on("focus","input.toggler,span.toggler", function(){
var $show = ($(this).data("show")) ? $($(this).data("show")) : false,
$hide = ($(this).data("hide")) ? $($(this).data("hide")) : false;
if($show){
$show.stop(true).show({animation: "blind", duration: 1000}).addClass("active");
if($show.data("validate")) $show.find(":visible:input.mandatory").addClass("required");
}
if($hide){
$hide.not($show).each(function(){
var $this = $(this);
$this.stop(true).hide({animation: "blind", duration: 1000}).removeClass("active");
($this.data("validate")) ? $this.find(":input.mandatory").removeClass("required") : $this.find(":input.mandatory").addClass("required");
resetForm($this);
});
}
});
This code accomplishes the task in all browsers except Safari. If the radio button is clicked in Safari, it does not "count as focus" and the hidden field is not shown. So I tried switching the event to fire .on("click focus") which kind of works; however, if there are additional hidden divs within a previously hidden div, the content of the additional divs will expand outside of the parent into other text because the parents height does not change with the additional hidden divs.
You can create click handler set focus.
Inside the click handler, you can use document.activeElement to determine if the element has focus already.
More information here: How do I find out which DOM element has the focus?
Related
I am trying to automatically click present buttons which are visible on a page, than triggering the scroll functionality after we've clicked the visible options.
I've messed around with the following code, however it didn't work in any formation I applied it.
$( ".follow-button" ).trigger( "click" );
And here's the button HTML.
<button class="follow-button btn-simple"><span class="following-txt">Following</span><span class="follow-txt">Follow</span></button>
for the visible buttons, now how you implemented it, checking the class and ignoring with class hidden or whatever is up to you
const buttons = document.getElementsByTagName('button');
Array.from(buttons).forEach(b => {
b.addEventListener('click', function() {
console.log(b.textContent);
})
b.click();
});
<button>asdf</button>
<button>hfdg</button>
<button>sfdf</button>
<button>ggfg</button>
You can use $(".follow-button:visible").click() to click on all visible buttons.
I have an ASP.NET page with a Telerik RadEditor (rich text box). When tabbing through a page, when a user gets to the text box, focus gets set to the various toolbar icons before it goes to the textarea. I added some jQuery to one page to set the focus on the text area when tabbing out of the last cell on a form:
$('input[type=text][id*=tbCost]').keydown(function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) { //If TAB key was pressed
e.preventDefault();
var editor = $('body').find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object
editor.setFocus(); //set the focus on the the editor
}
});
I am looking for a way to implement this functionality in the control so that it will work regardless of the page it is on. For example, in the above code, focus is only set if the user is tabbing out of the tbCost cell. I would like to be able to set the focus to the text area when a user tabs into the toolbar items.
Is there any way to detect when an element is about to get focus? I know I can see if an element has focus, but I can't think of a way to implement this functionality.
Thanks
Solution:
If anybody has this same question in the future and wants an example, here is the code I used:
$(document).ready(function () {
$('.reToolCell').focusin(function () {
var editor = $('body').find("<%=RadEditor1.ClientID%>");
editor.setFocus();
});
});
You might consider binding to a focus on the toolbar icons and redirecting focus to the text area. Although this might have unintended side effects if users are trying to tab-focus these tools in order to use them.
//on focus eventHandler for all your icons that calls a function
#('.elementtype, class or a generic way of identifying the icons'.onfocus(myFunction(this))
//the function take a parameter of your element, moves to the next sibling element and sets the focus
myFunction = (element) {
element.next().focus();
}
I created a dialog and when I open it by clicking a button the first input field in the dialog's container gets focused. How can I avoid it?
A great way to battle this issue is to disable all your form inputs:
by Id
$('#inputId').attr("disabled", true);
by Class
$('.className').attr("disabled",true);
by Form
$('#formId input').attr("disabled",true);
Then on the dialog open call you can re-enable all the elements in the form or individually if that was the path you took. It doesnt really matter if you disable all of them because you are about to re-enable them all.
$("#dialogId").dialog({
autoOpen: false,
width: X,
height: Y,
open: function(event, ui) {
**$('#formId input').attr("disabled",false);**
},
close: function(){
...
}
...
});
You can always manually remove the focus by calling blur() on this field.
Or do you need that the field never gets focused?
EDIT:
In order to prevent it's focus, you can add $("firstFieldSelector").focus(function(){return false;}. It will prevent the focus when opening the dialog. This seems to work at least on ff and chrome: see http://jsfiddle.net/g9GNn/1/ (it uses the jQueryUI example).
Our website involves some javascript that produces overlay modal windows.
There is one accessibility problem with this though, once the modal is triggered, the focus is still on the trigger element and not on the modal itself.
These modals can include all sorts of html elements, headings, paragraphs and form controls. What I would like is the focus to begin on the first element within the modal, so most likely to be a h4 tag.
I have explored using the focus() function however this does not work with a number of html elements.
One thought was to add an empty a tag in the window which could gain the focus, but I am unsure about this method.
very late to the party, but the existing answers do not respect accessibility.
The W3C wiki page on accessible modals offers more insight than what's asked in the OP, the relevant part is having tabindex=-1 on the modal container (which should also have an aria-dialog attribute) so it can get :focus.
This is the most accessible way of setting the focus on the modal, there is also more documentation about keeping it in the modal only - and returning it to the element that triggered the modal - quite a lot to be explained here, so I suggest anyone interested to check the link above.
You can append textbox to the beginning of the modal HTML, set focus then hide the textbox. Should have the desired effect as far as I understand your needs.
You could try to blur() the element that has the focus.
to trap focus inside the modal I have used this approach. So the basic idea behind it is exactly to trap the focus in the modal HTML elements and not allowing it to go out of the modal.
// add all the elements inside modal which you want to make focusable
const focusableElements =
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
const modal = document.querySelector('#exampleModal'); // select the modal by it's id
const firstFocusableElement = modal.querySelectorAll(focusableElements)[0]; // get first element to be focused inside modal
const focusableContent = modal.querySelectorAll(focusableElements);
const lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal
document.addEventListener('keydown', function(e) {
let isTabPressed = e.key === 'Tab' || e.keyCode === 9;
if (!isTabPressed) {
return;
}
if (e.shiftKey) { // if shift key pressed for shift + tab combination
if (document.activeElement === firstFocusableElement) {
lastFocusableElement.focus(); // add focus for the last focusable element
e.preventDefault();
}
} else { // if tab key is pressed
if (document.activeElement === lastFocusableElement) { // if focused has reached to last focusable element then focus first focusable element after pressing tab
firstFocusableElement.focus(); // add focus for the first focusable element
e.preventDefault();
}
}
});
firstFocusableElement.focus();
you can find it here trap focus inside the modal
I have a text area and a "add" button on a form. By default the text area is shown as shrinked and grayed out. On focus it will be highlighted by changing the style. On blur it should go back to previous state. Along with highlighting the textarea, add note should toggle as visible and hidden. The problem is when i enter the data in text area and click on the add button, the blur event is hiding the add button and the event on the add button is never triggered.. any solution??
It seems like my question is not clear...
The solution is something like execute the blur event except that the next focused element is not the "add" button...
If there is text entered is it safe to assume you don't want to toggle the button because the user has the intention of entering a note? If so you could do something like:
$(textBox).blur(function() {
if($(this).val().length == 0) {
//change the style
//hide the button
}
})
You need to unhighlight your textarea and hide the "add" button only if there is nothing entered in the textarea:
$('textarea').blur(function() {
if($(this).val() != '') {
// unhighlight textarea
// hide "add" button
}
});
This way the user always sees the field and button if they actually entered something into it, regardless of whether it has focus or not.
Put a small delay between the focus leaving the textbox and the button being hidden, e.g.
function textBox_blur(evt)
{
window.setTimeout(
function() { button.style.display = 'none'; },
200 // length of delay in milliseconds
);
}
This will leave enough time for the click to process (though you might want to play with the length of the delay)