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
Related
I have a scrollbox similar to:
http://www.quackit.com/html/codes/html_scroll_box.cfm
Right now, you have to click inside it after the page loads in order to use arrow keys to go up and down. I'd like it to be so that on page load, the focus is inside it already so you don't have to click inside it to use arrow keys. Is there any way to do this?
Thanks!
the div is not focusable element so the focus function will not work probably, add tabindex attribute to your div to make focus function work fine.
<div id="yourDivID" tabindex="-1"></div
Depending on the value given to tabindex, it will behave differently:
0 will allow you to focus the element with the keyboard arrows and tab key
-1 will disable tabbing, but it will still be focusable
Anything greater then 0 will allow you prioratize tab focusing, where 1 has the highest priority
now you can use focus in the div
if you want to use Jquery
$("#yourDivID").focus();
if you want to use JavaScript
document.getElementById("yourDivID").focus();
Here is what you need exactly. Note that there are a few key things playing here. First the body of the document needs to have the "onload" property calling your small simple script for "Focus". And the only change that I made to your code is the addition of an "id" property to the div. You can change this to suit your needs.
Enjoy!
<body onload="Focus()">
<div id="myDiv" style="height:120px;width:120px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">
As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we call it a scroll box! You could also place an image into the scroll box.
</div>
<script type="text/javascript">
function Focus()
{
document.getElementById("myDiv").focus();
}
</script>
</body>
You can see this working by simply copying this code onto a brand new text file and save it with an .html extension. Then double click on it and it should open up in any of your browsers. Provided you have scripting enabled then it should scroll just fine.
On DOM ready, simply set the focus:
$("#yourTextboxID").focus();
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();
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;
}
Here is a JSfiddle link to the script I am working with:
http://jsfiddle.net/TSM_mac/bnjWQ/
To use it, you first click the button and then on the element you want to modify.
As you notice, when you click the button to apply it to the div, the property is disabled and you can't just click on other objects. I want to be able to click the button, and apply it to any object without having to reclick the button.
The original code I wrote was not as tidy as this code, but a very helpful person wrote this for me to fix a problem I was having... I can't seem to enable this feature.
Just delete or comment out the line setting currentInput to null in the div.editable click handler and the if statement in the css property input click handlers. http://jsfiddle.net/bnjWQ/2/
I need to hide a text input field with javascript. Changing its type attribute to hidden does not work in IE (security issue).
What would be the best way to do it?
Note: No jQuery or other lib can be assumed.
I assume you have to show and hide the text field dynamically based on changing conditions in the form, otherwise you'd just make it an <input type="hidden"... to begin with.
Keep your code that shows and hides the field as it is, but also catch the onsubmit event.
In the submit handler, get your text field via document.getElementById(...) (or by accessing document.forms[i]) and check to see whether or not it's hidden.
If it is hidden, create a new DOM node for an <input type="hidden" ...> field and add that node to the form, probably via myform.appendChild(...). You'll have to give it the name your server-side code expects. Copy the contents of the hidden text field into the newly created type=hidden field, then return from your submit handler, allowing the standard submit to continue.
You could also just un-hide the text field on submit, but you'd have to move it "off screen" also or the user would see it reappear during submit processing.
Try wrapping it in a div or span and then setting the display style to none when you want to hide it, and then to block (if you used a div) or inline (if you used a span) when you want to show it.
document.myform.myelement.style.display = 'none'
works as expected even in Internet Explorer.
The only way you can change it is before you append it to the DOM. You can make a new element and then replace the current one with it.
Look at replaceChild and createElement since you want to do manual DOM scripting. I assume you know what to do.
EDIT: "Hidden" fields as far as I know are sent. Have you checked whether they are? And you can also just do position:absolute; left:-9999em; to offset them.