I have been using the jQuery UI mobile library and have the following method bound to an element for 'taphold':
// Apply class to annotations details to initiate animation
$('.detailsDiv').on('taphold', function ()
{
var openingID = $(this).parent().attr("annoID");
var showControls = true;
if ($(".annoEditableTextArea.annoName").length > 0)
$('body').append(pThis._getBlackoutOverlay(id));
}
else
{
$(this).off('mousedown');
pThis.base.annotations._setAnnotationDetailsActive(openingID, showControls);
}
});
This hooks the event just fine. However, on iOS safari if I click on a textbox from here after the 'taphold' event does not fire. I've tried to reattach the event after an unfocus of a textbox but still no luck.
Has anyone had any similar experiences with this sort of behavior?
Many thanks
I could not pin point the exact reason behind this, however I found a similar library from some guys called zauberlabs:
https://github.com/zauberlabs/jquery-tap-and-hold
This was a straight swap, with no extra coding required and solved the problem.
Many thanks,
Related
I am working on a large project and need to fix some accessibility issues.
These is a section which has been generated by https://www.atbar.org/ in a JS format I am not familiar with. The user clicks buttons to change font size, background colour and other html elements to assist them with reading content.
When you click on the buttons with your mouse they work fine. This is an example of how the buttons appear:
<li class=“access-button">
<a title="Decrease Text Size" id="block_accessibility_dec" tabindex=“0">A-</a>
</li>
If I focus my Chrome inspector on the link element I can see there is an event listening for my click:
This appears to trigger the change in font size. I found the code that triggers this click, it is in a JS format that I am not familiar with:
M.block_accessibility = {
init: function(Y, autoload_atbar, instance_id) {
this.defaultsize = M.block_accessibility.DEFAULT_FONTSIZE;
// This event triggers after clicking
Y.all('#block_accessibility_textresize a').on('click', function(e) {
if (!e.target.hasClass('disabled')) {
M.block_accessibility.changesize(e.target);
}
});
// This is the function it runs, it has many cases for all the different buttons.
changesize: function(button) {
Y = this.Y;
switch (button.get('id')) {
case "block_accessibility_dec":
Obviously this is just snippets of the code with comments I added.
What I require is the user to be able to change the font size using just tab and enter, so I added the following JQuery:
$("#block_accessibility_dec").keyup(function(event) {
if (event.keyCode === 13) {
$('#block_accessibility_textresize #block_accessibility_dec').click();
}
});
This is not triggering the change in font size. Yet when I click on the button it does? There is probably a really simple solution here but I've been stuck for ages. I tested the .click() on other elements on the screen and it works for them so the JS is definitely executing.
I have also tested:
$(this).click();
But to no avail.
Try to trigger the click event by the native way:
$('#block_accessibility_textresize #block_accessibility_dec')[0].click();
Source: I tried their demo page together with the chrome inspector and couldn't get the click working with JQuery.
But with the native click event it suddenly worked.
Unfortunately I can't really explain to you, why JQuery doesn't work here. Maybe something with their version (1.11)?
Replace your code with the following code and add the keyup event. This should work when you press the enter key.
Y.all('#block_accessibility_textresize a').on('click keyup', function(e) {
if (e.keyCode == 13 || e.keyCode ==9) {
if (!e.target.hasClass('disabled')) {
M.block_accessibility.changesize(e.target);
}
}
});
You should use the following Jquery:
$('#block_accessibility_textresize #block_accessibility_dec').trigger("click");
Please let me know if this doesn't work.
We have a select2 dropdown in a row (just a div) and we need to be able to click that entire row to trigger the dropdown. I have no problem showing it, but trying to hide it has become a problem, and I'm wondering if my logic is flawed somewhere. select2 AFAIK doesn't have a toggle method on the version we're on, so I have to manually use it's open and close methods. This is what I tried.
$('[data-variable-type=select]').on('click', function(e){
e.stopPropagation();
var _dropdown = $(this).find('div.interface_dropdown');
if( _dropdown.hasClass('select2-dropdown-open') ) {
$(this).find('select.interface_dropdown').select2('close');
}
else {
$(this).find('select.interface_dropdown').select2('open');
}
});
This causes it to open properly, but when you click to close it, it closes on mousedown but reappears on mouseup.
Is there someway I can get it toggling properly?
Will you post relevant HTML? It's hard to understand what you're doing without seeing content.
$('[data-variable-type=select]').on('click', function(e){
e.stopPropagation();
var _dropdown = $(this).find('div.interface_dropdown');
if( _dropdown.hasClass('select2-dropdown-open') ) {
_dropdown.removeClass('select2-dropdown-open');
_dropdown.select2('close');
} else {
_dropdown.select2('open');
_dropdown.addClass('select2-dropdown-open');
}
});
It looks like you forgot to add/removethat class, maybe this will work better? Again, I'm kind of feeling around in the dark here without seeing your content.
if( _dropdown.hasClass('select2-dropdown-open') ) {
$(this).find('select.interface_dropdown').select2('close');
}
in later versions of select2 (3.3+ iirc) this will never get triggered because when opened select2 creates a transparent mask over the entire browser and listens to click events. when the mask is clicked currently opened select2 is closed. this was the only reliable way to close a select2 when the user is ready to do something else.
The proper way is:
$('select').data('select2').toggleDropdown()
Edit: If you have not developed on Windows 8, do not try to answer this question. Do not vote on it. Do not even read it. This is not a web app or website and does not run in a browser. Please stop down-voting content you do not understand. This is a Windows 8 METRO HTML5/js application that runs in the Windows Runtime environment.
Original Question:
I want the cursor to be "blinking" in the input box, ready to receive input. I'm using javascript to set the focus. This isn't working:
document.querySelector("#input-box").focus();
Anyone know why? Is the focus method not the correct one to use for this?
Thank you.
Edit #2: So it definitely has something to do with the fact that I am trying to set focus to the input from a ListView's "itemInvoked" event. The event is firing properly, the element is accessible from the event handler, and the line has no errors on execution. I can set focus to my input tag from a standard button click event, but not from an ItemInvoked event. So the question is, why can't I set focus from within this event handler?
I have created this little test project with only a textbox and in the onload set the focus in exactly the same way as you do. I tried it both on the emulator and on my local machine and both methods seem to work.
Could you try if this project is working for you on your machine? And can you give us some more insight on when you are trying to set the focus? Right now in your question there is not that much information about when it's happening.
You can download the sample over here http://www.playingwith.net/Temp/TestFocusApplication.zip
Update
Okay, seem to found it, if you call the msSetImmediate function with the function that sets focus to the textbox it seems to work. I don't have an option to upload the test example, so below you find the code where I attach the ItemInvoked handler and call the setFocus function.
var listView = document.getElementById("basicListView");
listView.winControl.addEventListener("iteminvoked", function (evt) {
if (listView.winControl.selection.count() > 0) {
msSetImmediate(setFocus);
}
});
function setFocus() {
//Set focus on input textbox;
var input = document.querySelector("#input-box")
input.focus();
}
Which build are you on ? consumer preview or other dev previews ? I'm on DP6 (available to MS partners) and the JS standard stuff works.
In my default.html I have:
<input id="input1" type="text" value="one"/>
<input id="input2" type="text" value="two"/>
<input id="focus_btn" type="button" value="Set focus 1"/>
<input id="focus_btn2" type="button" value="Set focus 2"/>
And then in my default.js, in the app-launched-loaded boilerplate function I have:
document.querySelector('#focus_btn').addEventListener('click', function () {
var input1 = document.querySelector('#input1').focus();
});
document.querySelector('#focus_btn2').addEventListener('click', function () {
var input1 = document.querySelector('#input2').focus();
});
The only reason I can think of it not working is that the element is accessed before it is ready. That or earlier build bugs. I have the solution rar'd in : http://www.mediafire.com/?ghz49gtfxlgr7en if you want to see.
Try using non-jquery regular javascript like
document.getElementById( 'myElementsID' ).focus()
Try this to see if it helps:
if(document.createEvent)
{
document.getElementById('input-box').dispatchEvent('DOMFocusIn');
}
else
{
document.getElementById('input-box').fireEvent('DOMFocusIn', event);
}
Although the question is very old. But I struggled to find the solution for this.
First thing .focus() does not return any value it just set focus and undefined is returned.
Also, when we set focus on some element make sure that element has the tabindex present, otherwise it would not focus (mainly in chrome).
The following query may be used:
element.querySelector('#label').setAttribute('tabindex','0');
element.querySelector('#label').focus();
I was wondering if it was possible to stop the page from scrolling using javascript when a user type or clicks on a <input type="text"></input>
So I figured out how to accomplish this, and I will leave this as a record for anyone else who needs to solve this problem. (NOTE : this solution has only been tested on safari and Firefox)
for:
<input id="text" type="text" />
the function
document.getElementById('text').onkeydown = new function(event){return false}
Will not cause the window to shift the scroll so that a user can see the input field when he types into the field. If like me you want this to happen for some letters but not for others simply edit the contents of the onkeydown function so that it returns false for certain keycodes and true for others.
I faced up with similar problem. Try to use following solution: subscribe on focus event, disable window scroll in it's handler and turn scroll on by timeout.
I know solution seems not very clean, but demo looks nice, without visual defects.
$(function() {
var oldScroll = window.onscroll;
$(document).on('focus', 'input', function(e) {
window.onscroll = function () {
window.scroll(0,0);
} ;
setTimeout(function() {
window.onscroll = oldScroll;
}, 100);
});
});
http://jsfiddle.net/N4da4/8/
You could possibly set the scrollTop property to x every n milliseconds. The problem with that approach I would think would be that the page would look jerky (technical term) when the user attempted to scroll the page.
Besides, you'd be breaking the expectations of the user that they be able to scroll the page at any time which I would recommend against as it could confuse them at best and annoy them at worst.
In IE, for example, when you press the left button on an image and keeping it pressed try to move the mouse, the drag n' drop action is taking place; how could I prevent this default action so that doing that way nothing will happen. I am building an image cropper, so you should understand why I need that. I am not much interested in knowing how to do so with help of jQuery or the like. As I study JavaScript, I prefer coding in plain-vanilla JS. It is important for me to learn how to make it cross-browser if there are any differences for such a thing.
Just like August's, but plain JS:
var imgs = document.getElementById("my_container")
.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onmousedown = function () {
return false;
};
}
If you want to do it 'new-style', google for 'addEventListener()' (all browsers but...) and 'attachEvent()' (...IE) methods.
Here's one in jQuery:
$("#my_container img").mousedown(function () {
return false;
});
http://www.google.com/search?q=cross+browser+event+hooking will probably teach you everything you need to know about cross browser event hooking. I don't know how to hook events without a framework, because that's an edge case IMHO. In The Real World (tm), you'll always use a framework.
The core here is that you have to stop the mousedown event from running. This will make drag and drop impossible, if you hook the event on text you won't be able to select that text, and so on.
If you're building an image cropper, you're going to put some kind of overlay on the image, probably a relatively or absolutely positioned div, inside of which you will "draw" a rectangle when the user clicks, holds and drags. This will make it impossible for the user to drag the image itself, so no fix for that is needed.
Even if you do not use an overlay, you are still going to hook the mousedown event - there is no other way to implement a JS cropper as far as I know. Hooking that event will by itself be enough to prevent the browser from initiating a drag and drop action.
I'm using code similar to the following to prevent dragging, which has the advantage of targetting actual drag-related events rather than the generic mousedown (which could conceivably have side-effects). Works in all the mainstream browsers except Opera.
function cancellingEventHandler(evt) {
evt = evt || window.event;
if (evt.preventDefault) {
evt.preventDefault();
} else if (typeof evt.returnValue !== "undefined") {
evt.returnValue = false;
}
return false;
}
function disableDragging(node) {
node.ondragstart = cancellingEventHandler;
node.ondraggesture = cancellingEventHandler;
}
disableDragging( document.getElementById("anImage") );