javascript radio button focus doesn't work on firefox? - javascript

I'm using a form to get information from the user, and i am also using some radio buttons and textarea's, if the user hasn't picked an option from the radio buttons i want to focus that radio button so the user can know what data is missing.
I've tried:
document.FORM.RADIOBUTTON[INDEX].focus();
and it actually works well in google chrome, but for some reason it doesn't work on firefox,
i tried to use a setTimeout(.....); and again, it does work on google chrome but i don't get anything in firefox.
any ideas in how to get this to work?

It indeed works in firefox but the issue is the focused item is not highlighted in firefox. If you try to navigate the next DOM element using tab key, you will find it works. Some styling can be applied to element but DOM element styling also differ from browser to browser. See an example here
http://jsfiddle.net/uQ3vk/

Without seeing your HTML the best option I can suggest is to give your radio buttons (or at least the one(s) you want to be able to focus programmatically) an ID:
<input type="radio" id="radio1" name="someradiogroup" value="somevalue">
<input type="radio" id="radio2" name="someradiogroup" value="someothervalue">
<script>
document.getElementById("radio1").focus();
</script>
As with any programmatic access to DOM elements your code won't work if the element(s) haven't been parsed yet, so the code should be either in the document.ready / onload handler or later in the source than the element(s) in question. (Or in a submit handler, assuming a submit won't happen before the page loads.)

I think the missing outline in Firefox is the issue, I know it was for me. I added some CSS and got it to show.
input:focus
{
outline:#000 dotted 1px;
}
select:focus
{
outline:#000 dotted 1px;
}

Related

ng-click not working on child input tag (mozilla firefox)

<div ng-click="hello()">
<input type="password" disabled>
</div>
i have got the above HTML script .
parent div has a click function . when i click on child input tag in firefox the click event of parent is not working however in chrome it is working fine . removing disabled from input tag will make it work fine on mozilla , however i require this input tag to be disabled.
how to make it work on firefox without eliminating disabled from input tag
I know this is an old question, but since I just lost the better part of an hour on the same issue while working on my angular 8 project, I thought I'd anyway post the answer that worked for me.
First off, this is not really an Angular issue, but a Firefox issue. It seems that Firefox simply does not fire click events from disabled input fields. Therefore, when clicking the input, there is no event to propagate to the parent. Checkout this thread for more information: Event on a disabled input. Incidentally, I found this solution in a comment on the accepted answer, so credit goes to Doin.
So the easiest way around this behavior is by adding the following css style to the input element:
pointer-events: none;
This prevents the element from reacting to pointer events, which means that the pointer event is also not "absorbed" by the disabled input and fires from the parent element.
See below for a complete example:
function hello() {
document.getElementById('demo').innerHTML = 'Hi there!';
}
div {
background-color: aqua;
cursor: pointer;
}
div input:disabled {
pointer-events: none;
}
<div onClick="hello()">
<input type="password" disabled>
</div>
<span id="demo"></span>
Have you tried it with readonly instead of disabled?
<div ng-click="hello()">
<input type="password" readonly>
</div>

Unable to click a label programatically with javascript

I have a js problem. This site: http://befwifi.bobevans.com/Mobile.aspx (not my site)
How can you simulate a click on the “I AGREE TO THE TERMS” label with js programmatically?
The simulated click must do exactly what a real click does. ie Make the box look checked, without refreshing the page.
For example none of these work!
document.getElementsByTagName("label")[0].click()
$(document.getElementsByTagName("label")[0]).click()
$(document.getElementsByTagName("label")[0]).trigger("click")
(Site uses jquery)
Purpose:
I am creating a generic js script to record all clicks and inputs on a page. You can then replay those events when you land on the page again. I got stumped by this page because although i can easily record the onclick to the label, when i replay the click() programmatically it doesn't do the same as when i click on the element myself.
Try clicking the checkbox instead of the label. This will do what you want.
document.getElementById("chkAcceptTerms").click();
You need to raise click on the related input, e.g. with an ID selector;
$("#" + $("label").attr("for")).click();
the webpage uses jquery mobile
<input id="chkAcceptTerms" type="checkbox" name="chkAcceptTerms"/>
<label for="chkAcceptTerms">I AGREE TO THE TERMS</label>
to simulate click event try this:
$("#chkAcceptTerms").click();

how to make html button dotted inline appear

I am trying to add javascript to set Focus on a button, and hope to make the button look just the way it does when a user 'tabs' thru the HTML Form to reach the button.
The page that I am working on has an button element:
<input type="Submit" id="myBtn" class="myBtnClass >
In javascript function, I set focus to it using:
$("#myBtn").focus() When this function is invoked, I can see change of button image. Also, when I click 'Enter', the form does get submitted. However, in this case, when the image changes, I don't see the "Dotted inline" that generally appears on buttons.
but the dotted line Does appear when a user "tabs" to that button.
Am I expected to do anything other than $("#myBtn").focus()" ?
you can use css property:
`outline`
Could be running in IE7 compatibility mode, or using the wrong doctype.
See this similar question for more info and possible solutions: CSS 'outline' property in IE, and jQuery errors

jqueryui dialog not able to `select()` input in firefox 11

I'm running this code in Firefox 11 on Windows 7. (See http://jsfiddle.net/QStkd/).
$('<div><input type="text" value="val" /></div>').dialog();
​
The value in the input isn't selected, which is does do in Chrome and IE, it also doesn't work if I manually call the select() method.
Is this a known problem? Is there any way to select it? Timers work but if I click run on jsfiddle after it loads it doesn't work anymore.
It looks like calling focus() (which jquery-ui does by default to the first tabbable element) on Chrome (can't test IE -- on OS X) focuses the box and selects the text within the box.
Taken from jquery.dialog.ui.js:
// set focus to the first tabbable element in the content area or the first button
// if there are no tabbable elements, set focus on the dialog itself
$(self.element.find(':tabbable').get().concat(
uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
uiDialog.get()))).eq(0).focus();
Firefox, on the other hand, seems to only place the cursor within the box when calling focus. Therefore, you must call implicitly call select after the dialog has been created in order to achieve what you're looking to do.
If you reload your timers fiddle (as opposed to clicking run), you'll notice the example works every time. I think that jsFiddle is actually the culprit here (possibly the hashchange event, or some focus event on one of the panes after you press 'run' -- I haven't dug that deeply).
EDIT: (sorry, it's late) Looks like the root cause of the "problem" is Firefox. Not sure if this is designed behavior or not, but from what I can see, it looks like Firefox will not allow text to be selected in two different input elements within different content panes at the same time on the same page. This doesn't seem to affect Chrome (and, assumingly, IE9).
I made a quick example locally that has two iframes side by side (let's call them left and right). Left contains a textarea, and right contains your jquery-ui dialog -- similar to the fiddle you posted. right has the following code:
<script type="text/javascript">
$('<div><input type="text" value="val" /></div>').dialog();
$('input').select();
</script>
left has the following code:
<script type="text/javascript">
setTimeout( function() {
$('textarea').focus();
}, 1000);
</script>
If you piece these together and check out the result in Firefox, you'll notice that the input is focused and selected until the textarea in left is focused. I suspect something akin to this is happening in jsFiddle.
Try to use open event of ui dialog.
This event is triggered when dialog is opened.
$('<div><input id="yourInput" type="text" value="val" /></div>').dialog({
open:function(){
$("#yourInput").focus().select();
}
}
)
http://jsfiddle.net/sergeir82/A6Wah/8/
http://jsbin.com/etivej/4/
This is a FF issue in the dom determining if you have set the DOCTYPE. There is not a great way to fix it, a timer to focus tends to be the "hack around". However there is another step, if your Doctype is set to w3 xhtml standards you can use this to get it selected on focus. Add onfocus="this.select();" as a property of your input, so that when it is focused, it is immediately selected.

javascript event handling

I am building a web form for a login. I've decided to add in a few features I wouldn't normally. However I can't seem to get them to work in every instance. So, here's my problem.
On the form, as you progress through each of the inputs a javascript box on the side of the page scrolls down and notifies you about that input i.e. what they can enter, how many characters they have left.
It works great with text boxes, because i can use an onfocus and onblur event handler. However when you reach, for example, a div that has multiple check-boxes you can't exactly use the above event handlers for each input, because then they would have to select an option before the box tells them what it is about.
Ive tried using the onMouseOver and onMouseOut event handlers for the whole div, but it doesn't work fluidly.
So any suggestions? Maybe, is there a way to active a function if a users puts their cursor on a certain part of the screen?
hope this make sense,
thanks
could make a little ? icon or something next to it for someone to hover over, and attach the event to that...
...anyways...you sure you doing it right? post some code...for example, this works just fine..when I hover over the 2nd checkbox, I get the alert
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input onmouseover="alert('test');" type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
You should still have the focus/blur events on the checkboxes I think, for people using the keyboard.
Are you working with a js framework? With jQuery, you can simply do:
$(function() {
$(".div_around_the_checkboxes").hover(function() {
// show
},
function() {
// hide
});
});

Categories

Resources