Set focus on scrollbox on pageload - javascript

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();

Related

is it possible to change an element on responsiveness?

just wondering if it's possible to change a div to an input at a certain breakpoint?
I have a div that contains some names in and then when I switch to mobile, I want this div to become editable so I can change the names.
I guess I have 2 options, change the element type or make the onChange function only applicable on mobile.
is either possible?
can post code but essentially just want a guide or solution how to do this
First, to detect a mobile browser, you can use
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
Then, on your page, use two elements - the div and the input (or a textarea) and just keep one of them hidden at all times. It seems like you want to listen for a click on the DIV to enable the INPUT, or? And you'll want a key listener on the input to update the DIV as well as another listener to handle hiding the input field and showing the DIV again

Setting focus on next dropdown instead of using blur() method?

Problem:
I have many drop downs with dynamic changes going on at all times. The problem is I am having to use the blur() method to disable focus so that the class depending on the selected value can be applied.
Is there a way I can set the focus onto the next drop down element.
Tried:
Instead of blur(), I have tried this but it did not work.
this.next(".Element").focus();
Current code:
$('.Element').change(function () {
var colour = $(this).find('option:selected').attr('class');
$(this).removeClass().addClass(colour);
this.blur();
}).change
JS Fiddle:
jsfiddle of my code
try to make this a jQuery object to focus another element
$(this).next(".keyTechElement").focus();
EDIT 1:
Seeing your DOM, changes is needed. The .next() function selects siblings in the DOM and inside <td> there is no .Element sibling.
$(this).blur();
$(this).closest('td').next("td").find(".Element").focus();
http://jsfiddle.net/UXJZ7/2/
I think manipulating focus with focus() or blur() is terrible for keyboard users.
Users also detest auto-tabbing on forms they rarely use.
Onchange doesn't mean a selection has been made, a user could be stepping through the options with the keyboard (or with assistive technology that simulates the keyboard like speech recognition software), you get an onchange event for every step in their selection.
You can get quite elaborate to work around this, but it's rarely worth the effort.
For your example, I'd just leave things like this: http://jsfiddle.net/KWvMZ/ It looks like the only reason you have a focus state in your style is to display the text with sufficient contrast, so I just set the yellow background to have black text when focussed and left it like that.
.

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.

Closing keyboard on iPad in div contenteditable

Is there a way force the keyboard on iPad to close on blur of div 'contenteditable'??
Here is a basic jsfiddle: http://jsfiddle.net/j_tufte/7HDmN/
I'd like to have the keyboard close when a user clicks on the button.
Any thoughts super appreciated.
Thanks.
As you have mentioned in your comment, element.blur() unfortunately doesn't work on an editable div. But you could instead move the focus to an actual input field and remove it again right away:
$('#otherBox').on('click', function(){
$('#orInput').focus().blur();
});
(This uses your jsFiddle HTML code).
There are downsides to this approach: you need another input field (which you can't set to display: hidden or visibility: hidden, but you can set it's size to 0 and opacity: 0). Also, the view may scroll to the location of this input field when the above handler is invoked. So you will need to place the second input field right next or behind to the editable div.
You will also need to take care of the input field not being targeted by the previous/next buttons: set it disabled.
<input id="orInput" disabled="disabled" style="width:0; height:0; opacity:0" type="text" />
For focussing/blurring you will then need to enable the field:
$('#otherBox').on('click', function(){
$('#orInput').removeAttr("disabled")
.focus().blur().attr("disabled", "disabled");
});
However, this is definitely a workaround. I haven't found any other solution yet (e.g. removing the contenteditable attribute doesn't work) but I'd very much like to hear other ideas.
You should be able to do exactly that -- attach an event listener to the button and use it to blur() the input field that caused the keyboard popup (use JavaScript to get a handle on that element and then call it's blur method). That supposedly closes the iPad keyboard.

Categories

Resources