Develop Reference

How to set Focus to tizen web app document object for eventListener? (Javascript)

I am developing a Tizen Webapp for Watches with bezel input.
To listen for the Bezel rotation event on the HTML document I used the following code:
rotaryDetentCallback = function rotaryDetentHandler(e) {
var direction = e.detail.direction;
if (direction === "CW") {
alert("<-");
} else if (direction === "CCW") {
alert("->");
}
};
document.addEventListener("rotarydetent", rotaryDetentCallback, false);
console.log(document.hasFocus());//returns true
$('select').on('change', function(){
console.log(document.hasFocus()); //Prints false
document.activeElement.blur(); //doesnt work
window.focus(); //doesnt work
document.focus(); //retuns error
});
The rotarydetent listener works great but after I change any Select element in the App at runtime, the document loses focus and the event is not firing any more.
How can I get the focus back to document object after select change?
PS: the standard UI for Select Tag on Tizen wearable web-apps uses the bezel also, so I guess it takes the eventListener from document and doesn't give it back.

There is no such function document.focus() and window.focus() is for restoring the focus to the current window (apparently if you have multiple ones open) and not for bringing it back to the contents of the page.
Try to focus document.body or its focusable ancestor instead - the one being a form field, or a link or having an appropriate tabIndex attribute.

Disable mobile longpress context menu on specific elements

I have an image gallery with various controls. One of the controls is a basic delete function, to delete you click and hold for approx 1 second to get a confirmation asking if you want to delete. All works fine, it's just that on mobile devices it often causes the "Save Image As, etc" menu to pop up which has to be closed before the intended action can be performed.
I've read about various fixes but none of them seem to work with current versions of Chrome mobile on my Galaxy S5, and the most recent answer I could find was from 2013.
I found one saying that the context menu was it's own function, so I tried something like this:
window.oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation();
return false;
};
But it did not prevent the context menu from showing on my S5. As I said, I'm hoping to find a solution to prevent it from coming up on certain items, not the entire window.
Thanks to Tasos for the answer
document.getElementById('yourElement').oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation(); // not necessary in my case, could leave in case stopImmediateProp isn't available?
event.stopImmediatePropagation();
return false;
};

I (re)post the answer here because at first, I haven't seen it was in the question :)
So juste use this code, with stopImmediatePropagation :
document.getElementById('yourElement').oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation(); // not necessary in my case, could leave in case stopImmediateProp isn't available?
event.stopImmediatePropagation();
return false;
};

'taphold' event disabled after focus on a textbox

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,

Detecting drag drop to HTML textbox?

I have a normal search box on my webpage. It is filled with text: Search this website
This text is removed when you click into the box to type your search query:
onfocus="if(this.value=='Search this website') { this.value=''};
But how can I detect when someone drags text from the page onto the search box, as I often do myself? onfocus is not triggered and the previous text remains.

You need to use the ondrop event, which will only fire if the ondragenter and ondragover events are cancelled. Turns out it's a bit trickier than that because the behavior is different in Firefox than IE, Safari and Chrome.
(function () {
var inp = document.getElementById("test"),
chg = false;
inp.ondragover = inp.ondragenter = function () {
chg = inp.value == "Drop here";
return false;
}
inp.ondrop = function (evt) {
evt = evt || event;
if (chg) {
this.value = evt.dataTransfer.getData("text")
|| evt.dataTransfer.getData("text/plain");
return false;
}
}
})();
Example - Firefox 3+, IE5+, Chrome and Safari. Near as I can tell, Opera doesn't support the event. At least you can get it working for 95% of your visitors though.
Drag Operations - MDC

Have you tried to use the onchange event?
BTW, there is a nifty little jQuery plugin called jquery-defaultvalue which handles all the corner cases for you. If you're using jQuery anyway, it's worth a look.

See - http://www.simplecoding.org/drag-drop-s-ispolzovaniem-html5.html , but page on the russian language (Google Translate would help).

JS: How to prevent the default action on images in browsers?

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