TouchSwipe-Jquery-Plugin
TouchSwipe-Jquery-Plugin copied to clipboard
mattbryson
Selecting Text
Hi,
I am using the touchswipe plugin on my wrapper div. Everything works normal except for selecting text inside the wrapper, i cant select anything inside my wrapper div.
Is there a fix for this issue or a work around?
I was able to do this by removing some off the event.preventDefaults from the plugin. https://github.com/nahakiole/TouchSwipe-Jquery-Plugin/tree/patch-1
Rather than tampering with the source code's logic, you should add the elements you want be selectable to the excludedElements object, or add the predefined class .noSwipe to those elements' markup.
In my opinion the script should let the developer decide whether he wants to prevent the default event. I can't understand why you want to prevent the event by default.
By removing I meant not tampering in the source code, but more finding the responsible .defaultDefault calls and removing them so the event gets passed down correctly.
Also in my case I wanted to use the plugin for an off canvas navigation, which you could swipe in. But as written in the question if you use a wrapper as the slide element you can't select text in the wrapper anymore. Which is pretty bad if the wrapper spans over almost the whole body.
u can also bind longTap event with jquery select()
longTap:function(event,target) {
target.select();
}
The problem with excluding elements is that they then become a dead-zone for swiping.
I have slides with content of each in an inner div where I want the text to be selectable on a PC with a mouse, and if it works on a phone/tablet that's a bonus. These content areas are too central and large to be a "no swipe" area without making it difficult to use on a phone so I need to find an alternative:
- I don't expect people to need to select text on a phone/tablet but the hold-to-select method used to select text that is built in to them means that the swipe is bypassed, so I can forget about them.
- I don't care for swiping to work by mouse as there are nav-buttons so I can easily divert the swipe action by using "if(fingerCount < 1)".
The bit that is to follow needs to undo the preventDefault and return us to business-as-usual. I have tried "return true" with no success, and it's looking like the only way would be to tamper with the plugin code as nahakiole did. The only other option is to exclude the whole plugin based on device, but given that that is never a great option, and what do we do about touch-screen PCs, I'd rather not have to do that.
I can confirm that - when I have touchswipe certain elements cannot be text-selected. Strangely, some other elements (for example,
Hi,
I had the same issue and I couldn't add .noSwipe class to any element. So I decide to detect the mobile device first then apply this plugin. It works well.
// Code credit: http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery
function isMobile() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
}
if ( isMobile() == true ) {
}
That's pretty much what I ended up using, but surely a PC with a touch-sensitive screen would wrongly be identified as a mobile device just because it has the capability of touch, regardless of whether you were using a mouse at the time.
While i am using swipe to open sidemenu, i cannot use excludedElements or .noSwipe ... dunno why this is not solved yet ... i thought, preventDefault = false would solve it, but it does not ... Please, can You solve it? I have to use different lib right now for that, but i do like this one better.
I solve this issue by attach swipe event only on touch. This is my code :
$(document).on("touchstart",function(event) {
// Attach swipe event here.
});
So it also detect touchscreen in PC, rather than use mobile device detect.
What exactly is the issue here - is this on touch devices? iOS, android, windows mobile? or using a mouse?
Using a mouse, clicking and dragging to select text is the same as swiping, so they are mutually exclusive.
I've just tested in iOS and long press to select text works along side swiping.
If someone provide a clear example of what the issue issue is I will have a look at it.
@mattbryson Using a mouse, on my site can't select the text. For me it's not a real bug, it needs only a workaround because ad You said dragging the mouse to select text it's like swaping
Yeah, this is a tricky one on mouse based input.
I the latest version, If you don’t “move” in an interaction, then it allows default events. This means out the box things like buttons and a tags will trigger without the need to exclude them.
If your text is in a text input, the clicking in that input and then selecting may work, but Ive not tested that scenario.
If you test is just part of a DIV, then there is no way for the plugin to know if the user should be selecting text or swiping.
m
-- Matt Bryson
On 29 April 2016 at 19:35:12, Luca Scalvi ([email protected]) wrote:
@mattbryson Using a mouse, on my site can't select the text. For me it's not a real bug, it needs only a workaround because ad You said dragging the mouse to select text it's like swaping
— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub
For me its not possible to select text on a desktop pc, too. I can live with it. But I have another problem. My select boxes are not opening! This is a bug for me with which I cannot live, so I decided to just enable swipe on touch devices with the function @reardestani provided above.
Just discovered the library (great work! :)) and immediately noticed text selection issue with mouse-input devices. At first, I have bind listener to the entire document (body) per my requirements, but soon realized this is a bad idea, because of non-functional text selection issue.
-
One way is to use above mentioned mobile detection (3rd party library with high accuracy is recommended) and enable it only on touch supported devices, where this problem with text selection does not exist since long-touch initiates text selection mode on OS level.
-
As goesredy suggested, bind it to touchevent only, it will solve text selection problem. This method alone is good enough to at least make things normal on conventional PCs with mouse.
-
Bind swipe to an element that does not contain any text (e.g. top/bottom bar or similar).
-
Try/Test config options:
preventDefaultEvents: false, fallbackToMouseEvents: false,
Does anyone have a reliable solution to this? This is quite a critical one which baiscally means we can't use this plugin in production at all, but it is a great plugin and does add the neat swipe functionality.
@thefraj what is your usecase - you want swiping on touch interaction, but text selection on mouse interaction?
Hi @mattbryson thanks for your help - edited this as we've resolved it, bascially we went with the method of testing the browser in script, then injecting the JS include and calling the initialiser if on a mobile. Otherwise both the JS library and call are not added to the document (What stopped this working earlier was a combination of things and how I'd gone about this, in principle it can work)
I used Ben Majors "jquerytouchevents" before I switched to this solution here, due to errors in conjunction with other libraries etc. Bens solution didn't block text selection for mouse usage.
I'm curious why Matts solution goes that route? There must be a reason why this hasn't changed in more than 5 years.
Until now I used version 1.6.6 and it didn't give me problems. But it was changed to version 1.6.18 and the imput-select stopped working. So for now I continue with 1.6.6 despite other problems it has.
