Using Hammer.js and the Touch Emulator found here:
https://github.com/hammerjs/touchemulator
Cannot seem to click into a text input at all let alone edit it.
I have figured it out!
When creating the Hammer event add a Tap event to it. In the handler for the tap event focus and click of the target element. This will allow input fields and buttons to be utilized that are wrapped in the Hammer object.
Hammer v2.04
var el = document.querySelector("#touchable");
var mc = new Hammer.Manager(el, {});
mc.add(new Hammer.Tap({ }));
mc.on("tap", function (ev) {
ev.target.focus()//This allows text fields to be focused on
ev.target.click()//This allows buttons and other objects to be clicked
});
This Works best for IOS and Android devices specifically
Not a perfect solution but I have been able to edit inputs by placing this line at the top of the onMouse function.
if (!ev.shiftKey && ev.target.nodeName === 'INPUT') return;
Roughly translated to, no multitouch and you're clicking an input, ok I'll do nothing...
Related
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");
}
})
I'm developing a small library in which I have an input which when focussed, can't be blurred by clicking/tapping a specific div (by returning false on the mousedown event). Other elements are fine (normal behavior). Mentioned div contains in the actual implementation a few buttons which add text to the input field. The focus is not required for that to work, but I want keyboard input accepted there as well, so I want it to work the way I explained.
I noticed somewhat strange behavior on mobile though.
When longpressing (click and hold a few hundred ms) the unclickable div whilst focussed on the input, the mousedown event doesn't occur and the blur event magically triggers. I noticed that another event did not occur either, so it's not only the mousedown event.
Example:
<input id="input" type="text" />
<div id="disabledArea" class="flex-center">
Blur disabled when clicking here.
</div>
With the following JavaScript:
var input = document.getElementById('input');
var disabledArea = document.getElementById('disabledArea');
input.addEventListener('blur', () => {
console.log("blur");
});
disabledArea.addEventListener('mousedown', (e) => {
console.log("mousedown");
e.preventDefault();
return false;
});
https://jsfiddle.net/pgukmmjo/
Can anybody help me with this? It's kinda hard to explain, but very obvious once you understand the problem.
I recommend the example JSFiddle to be viewed in Chrome with DevTools open (CTRL + SHIFT + I) and device toolbar on (CTRL + SHIFT + M) which simulates mobile touch. Alternatively you can change the console logs with alerts and view it on mobile.
I have been searching for how to trigger the android keyboard via Javascript.
I have found a few answers but none of them seem to work.
One solution is here:
Showing Android's soft keyboard when a field is .focus()'d using javascript
On the example above there is a button involved which I don't have, but do I need it?
I am using 'tap' and 'swipe' events via the touch-layer.js which seems to disable click events in favour of tap. (https://github.com/cubiq/touch-layer)
Below is the code I've tried, the alert triggers and the focus happens but the keyboard doesn't show.
gt("#txtEmail").on("tap", function() {
alert('tap');
$(this)[0].el[0].focus();
$("#txtEmail").trigger('click');
});
Thanks.
EDIT 1: Second attempt doesn't work even though this seems more inline with the example.
gt("#txtEmail").on("tap", function() {
alert('trigger');
$("#txtEmail").trigger('click');
});
$("#txtEmail").on("click", function() {
alert('recieved');
$(this).focus();
});
In addition to Jack He's suggstion, check out ionic-plugin-keyboard. This one is more actively maintained and used by many.
In my case, I just bound focus event to a handler function that manually shows the keyboard.
$(".my-input").on("focus", function(e) {
...
cordova.plugins.Keyboard.show();
...
});
What you need is the SoftKeyBoard plugin. Just check the link to find what you want.
We are using W2UI (Javascript UI) controls. It has a "Multi Select" input control with associated div container with suggestion data. Whenever user clicks on input control a suggestion div is popped up and user can select multiple items from the list. Please find below screenshot
We have set overfloaw:auto of div When suggestion list has more than 10 records. (Refer below screenshot)
At this point, clicking on scrollbar works fine in Chrome and Mozilla but in case of IE it closes / hides the div.
We have made initial RCA of this as follow.
When a scrollbar is associated to a div, clicking on scrollbar causes blur event to fire for that div.
In W2UI library, blur event is used to hide the suggestion div causing it to close. We also found that, clicking on scrollbar does not cause blur event to fire in chrome & firefox.
Now we want to suppress blur event when user clicks on "scrollbar" in case of IE.
We are unable to identify scrollbar click.
Please share your thoughts / workarounds about suppressing blur() event conditionally.
I am also facing same issue we have made some changes in w2ui lbrary
we have set global variable flagClick first time it is false. & added below events
var div = $('#w2ui-global-items');
div.on('mouseover', function (event)
{
flagClick = false;
$('.w2ui-list').find('input').focus();
});
div.on('mouseout', function (event)
{
flagClick = true;
});
and changed blur event logic of div
as below --
.on('blur', function (event)
{
if (flagClick)
{
$(div).css('outline', 'none');
obj.hide();
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
}
})
almost this logic have solved our issue, except one .
When we click on search textbox then list will populate , if after that we click on list scroolbar and after that click on outside list div , List not getting hide (div blur event not getting fired).
try this solution , it will help u .
If you get solution to our problem pls post on same .
An updated version of w2ui came out just a few days ago where controls, including multiselect, have been refactored. It seems to work fine for me with 1.4 version.
I have a structure:
<span class="word">This</span><span class="word">is</span><span class="word">the</span><span class="word">text</span><span>.</span>
I want user to be able to make a selection of whole words (spans, class="words") (in browser on desktop and on iOS as well - like in iBooks).
And how can I style it with css?
What is the right way to do this? (didn't work with selections before)
Thanks.
I know you didn't mention jQuery - but with something this dynamic I think it is highly advisable to use it.
Wrap that whole deal in a div.
<div id="wordSelector"><spans></div>
And then attach a mousedown event to the div. Use a semaphore to ensure that events are handled only during mousedown. Capture mouseover events on the spans until the mouseup event is registered.
Note: These events may need to be attached to document instead of the div to ensure that a mousedown event outside of the div but entering the div is handled, and with mouseup as well in case the mouseup event is outside of the div.
var spansTouched = [];
var mouseDown = 0;
$("#wordSelector").mousedown( function(){
//track spans touched with a semaphore
mouseDown++;
});
$("#wordSelector").mouseup( function(){
mouseDown = 0;
//handle spansTouched and then reset it to []
});
$(".word").mouseover( function(){
if(mouseDown > 0){
spansTouched.push(this);
}
});
Obviously there is room for improvement here, this is just to highlight a possible approach to take using a semaphore and mouse events.
Not sure how you mean that the user should select a word. If the user should "select" a word by clicking on it, you could use a jQuery plugin like TipTip or any other tooltip-plugin. At least tiptip support click.
Not sure if any of the tooltip-plugins support triggering on highlight of text by default, but using a JavaScript to listen for highlighting of text and the trigger the appropriate tooltip to show manually, and hide it again if the text is deselected.
Dave Welsh has written a small piece of jQuery to sniff for text-selection, that could be utilized.