We Keep Coding

How to handle keyboard "Done" button in iphone safari browser using JavaScript [duplicate]

I'm wondering if there's a way to capture the iPhone's virtual keyboard's done button event, using JavaScript?
Basically, I just want to be able to call a JS function when the user clicks done.

I was unable to track the 'done' button being clicked. It didn't register any clicks or keypresses. I had to addEventListeners for change, focusout and blur using jquery (because the project already was using jquery).

You need to do some kind of this:
$('someElem').focusout(function(e) {
alert("Done key Pressed!!!!")
});
It worked for me, hope it will help you as well.

After searching and trying this solution
basically is say:
document.addEventListener('focusout', e => {});
tested on IPhone 6s

This question is kinda old, but I've found a hacky way recently to make this working.
The problem with the 'blur', 'focusout' events is that they fire even if user just tapped outside the input/textarea, and did not press the 'Done' button, in my case, UI should behave differently depending on what exactly have happened.
So to implement it, I've done the next thing:
After showing the keyboard (the input received the focus), add click handler on the window via the addEventListener function. When user clicks on the window, remember the timestamp of the click in the variable (let's call it lastClick = Date.now())
In the blur event handler, set a timeout for 10-20 ms to allow other events happening. Then, after the timeout, check if the blur event happened in a time difference lower for example than 50-100 ms than the lastClick (basically Date.now() - lastClick < 50). If yes, then consider it as a 'Done' button click and do corresponding logic. Otherwise, this is a regular 'blur' event.
The key here is that tapping on keyboard controls (including Done button) does not trigger the click event on the window. And the only other way to make keyboard hide is basically tap on other element of the page and make the textarea lose focus. So by checking when the event happened, we can estimate whether that's a done button click or just blur event.

The answer by oron tech using an event listener is the only one that works cross platform.
document.getElementById("myID").addEventListener("focusout", blurFunction);
function blurFunction() { // Do whatever you want, such as run another function
const myValue = document.getElementById("myID").value;
myOtherfunction(myValue);
}

"Change" event works fine
document.querySelector('your-input').addEventListener('change',e=>
console.log('Done button was clicked')
);

attach a blur event to the text box in question. The done fire will fire this event.

The done key is the same as the enter key. So you can listen to a keypress event. I'm writing this using jQuery and i use it in coffee script so I'm trying to convert it back to js in my head. Sorry if there is an error.
$('someElem').bind("keypress", function(e){
// enter key code is 13
if(e.which === 13){
console.log("user pressed done");
}
})

Prevent force touch event on image but still allow long press event in iOS Safari

We have a need in our image gallery to prevent Apple's Force touch events on images, but still allow the long-press which triggers the 'Save Image' callout. We provide instructions for our iOS users to long-press on the image and then select 'Save Image', but users get very confused if they accidentally press too hard and trigger a Force Touch event - especially if it 'pops' and loads the image in a new page.
Initially I thought of listening to the touchforcechange events, and then calling preventDefault when the force reached a certain level. Something like this:
imgEl.addEventListener( 'touchforcechange', 'onTouchForceChange', false )
function onTouchForceChange( e ){
if( e.changedTouches[0].force > 0.5 ){
e.preventDefault()
}
}
However, that seems to block the long press events as well. There also doesn't seem to be one particular force level at which the event switches to a Force Touch.
Adding the css property -webkit-touch-callout: none; to the image does block the Force Touch event, but again, it also blocks the callout on the long press.
Any ideas greatly appreciated!

(Using jQuery, but can probably be accomplished without it)
this seems to be working for me, tested on iPhone 7 plus iOS 10.3.3:
window.addEventListener('touchforcechange', function(event) {
var force = event.changedTouches[0].force;
var id = event.changedTouches[0].target.id;
if ($('#' + id).hasClass('class') && force > 0.1) {
event.preventDefault();
console.log('prevented 3D touch on element with id = ' + id);
}
});
replace 'class' with the class of the elements on which 3d touch should be prevented. in your case, probably a class shared by all the image elements in the galary.
I think the main problem with yours is that 0.5 is probably too high of a threshold.

You can embed your image in an svg tag to prevent this.

Issues dragging elements in Firefox

Are there any reasons why an image would not be draggable in Firefox even when the attribute draggable="true"? I'm designing an image swapping script in JS but am having some problems when running it in Firefox. While the code works fine in Chrome, Edge, and IE, when I try and drag and drop an image in Firefox it doesn't appear as if the browser is letting me drag the image (no ghost image appears) and thus my drag event isn't firing or triggering any of the drop events. I am generating the image via document.createElement('img') and setting the attributes with
imgElement.setAttribute('draggable', true);
imgElement.setAttribute('ondragstart', 'drag(event)');
my drag function:
function drag(ev) {
if (!ev.target.classList.contains(clickClass)) {
return;
}
ev.dataTransfer.setData("text", ev.target.id);
document.getElementById(ev.target.id).parentElement.setAttribute('class', 'noclick');
};
I read in a different question that the drag event may not fire in Firefox if data isn't being transferred, however, that doesn't seem to be the issue here.

Instead of imgElement.setAttribute('ondragstart', 'drag(event)'); you should add the dragstart listener instead:
imgElement.addEventListener('dragstart', function(e){
drag(e);
});

It seems in Firefox, at least in v61, setting the draggable attribute to false, instead of true will give you the desired result - allowing the image to drag along with the movement of the mouse.
element.setAttribute('draggable', false);
It may be that Firefox assumes it will handle the dragging of images, unless you explictly set an attribute to false, in which case you use your own js handler to move the image yourself.
It also seems Firefox resets the attribute back to true by default once the initial movement has occurred and the mouse button released. The draggable attribute must be reset back to false to start the process all over again. But, that shouldn't be a problem considering you're likely handling all mouse events for that image, and can easily insert a line of code to ensure that dragging is false when you need it to be.

How can I detect when a certain DIV has changed size without polling? I.e., I want a resize event listener?

So I am running ads on a website that I have and one of the ads periodically changes the dimensions of the DIV that it is in -- it grows and shrinks and shows bouncing things and flashing lights and sparkles, etc. This is fantastic and I love it.
One problem, however, is that the layout of other elements on my page is screwed up when this happens.
This is no big deal though -- all I have to do is add an event listener to the DIV element in question and listen for resizing events. When they occur, I will run a callback function that will adjust the layout of the other elements of my site.
My problem is that the resize event listener is only available for the window object itself, not for other elements in the DOM. How can I listen for resizing events on a particular DIV without polling?
I would like to do something like:
$('my-div-id').on('resize', function() {
do_things();
adjust_layout();
etc();
});

You could use a window.setInterval, that checks every x ms if the element in question has changed size:
var ElementSize = $("#element").width();
window.setInterval(function(){
if( $("#element").width() != ElementSize )
{
ElementSize = $("#element").width();
redolayout();
}
}, 50);
function redolayout()
{
// Add code here to resize other elements according to the change.
}
Another option: https://github.com/sdecima/javascript-detect-element-resize

Resizing multiple images via jquery one at a time

So I am writing some jquery that is basically meant to resize any image when I click on it, meaning I can click on one image and resize it, and then click on any other image and start resizing it as well, but idependently. The code I have to do this is as follows:
$('img').click(function(e) {
thisImage = this;
$(document).keypress(function(event) {
if ( event.which == 115) {
$(thisImage).css('width', "+=25").css('height', "+=25");
};
if ( event.which == 97) {
$(thisImage).css('width', "-=25").css('height', "-=25");
};
});
});
This works fine the first time you use it. You can click on an image when there is more than one image present and the image that you clicked on will resize appropriately when you hit the appropriate buttons. Upon clicking the second image to resize it, however, both it and the first image you clicked will start resizing together. This scales with as many images as you can put on the page, i.e., three images will resize together after each has been clicked on.
Does anyone know why this is happening and how I can stop it? I would like to be able to click each image and be able to resize it independently, no matter the order it was clicked on. I have a feeling this has something to do with the way I am using "this," but I am relatively new to jquery and javascript so I cannot think what it would be.
Any help would be appreciated. Thanks!
-Alex

Essentially the issue here is that each time you click an image, you are binding a new listener to the document.
This means that every time you press a key, you invoke all of the listeners that you have added. What you would want to do is unbind the listeners that are still on the document when you click the next image, which will mean that only one image will be listening for your keypresses at a time.
For example, in this jsfiddle we have the code:
$('#in').keypress(function(event) { alert('first'+event.which); });
//$('input').unbind('keypress');
$('#in').keypress(function(event) { alert('second'+event.which); });
Which adds two listeners to an input element, and as you can see by pressing a key within the element, it causes both listeners to run. Essentially you are adding a new keypress listener each time you click an image, and the old ones are never being cleared out. If you uncomment the unbinding command in the jsfiddle, you will see that only the second alert will be invoked, because the first listener is released. If you only ever want the keys to be listening to one image at a time, then you will want to have something along the lines of $(document).unbind('keypress') at the beginning of the click listener (of course this will clear all keypresses, so if you have other listeners attached to the document you will want to be a bit more careful managing them, for this problem it will be sufficient).

Yes, that's how it will work with this code.
Reason is, in the img.click event handler you attach a new event handler on document.keypress which will resize the image by passing it a reference to 'thisImage'.
What happens is, this document.keypress event handler for this image will continue to live on, even if you click on another image, and will resize the image on each keypress.
These event handlers will continue to accumelate as you keep selecting new images.
What you need to do is remove the previous event handlers when user clicks on a new image.