Perspective Mouse event, disable cut/copy/paste on iPad

We use a lot of mousedown/mouseup events on our old mobile module on Ignition v7.9. This allows us to set a OPC tag to 1 on mousedown, and then 0 on mouseup. (Moving equipment from iPad screen). I’m trying to recreate this on perspective.
I use the onTouchStart event and onTouchEnd event to accomplish this. I couldn’t get the onMousedown and onMouseUp events to work with Perspective properly. While it works, since now it’s HTML5 i guess, I can get a popup on the iPad when I hold down the button. This popup is prompting me to select the item/button and cut/copy/paste text. I read that there is a way to disable this popup on mobile version of safari using css, but I can’t find in perspective where you can inject custom css. Anybody have any ideas or solutions to this? Thanks in advance.

There are 3 ways to affect the CSS in Perspective. I’ll focus on two, since the third (theme css) is still a work in progress.

  1. Style Properties - these are the values that you add to a component’s style property
  2. Named Styles - these are the Style resources you can create and add to a component’s style.classes array.

Which (if either) will work for you really depends on what CSS you’re specifically looking to add, as neither supports all possible CSS selectors/functions.

What CSS are you looking to add?

If neither of those work, we can talk about the theme css, but I’m a little hesitant to go there since that system is changing. Since it’s not technically a documented/supported feature yet, there’s a chance that changes there right now would be lost there on upgrade.

From searching the web, here is a way to disable the select feature (on mobile safari at least).

-webkit-user-select: none;

Not sure which place this CSS code would go?

Sorry about this. I just answered my last question. I added a new ‘value’ to the button called, ‘-webkit-user-select’, then set the actual value to ‘none’ and it worked! Thanks for your help!

2 Likes

Hey Micah,

Where exactly did you add this property? I can’t seem to get this solution to work.
Did you have to bind it to another property once you created it?

Hopefully this post isn’t too old to for a reply.

Thanks for any help.

Well I just went through all of my code, which to my knowledge has been working for years, and now I can’t find that piece of code anywhere lol. go figure. Where I think would be most logical is under the style props of the button. Add a custom ‘value’ and set it to ‘webkit-user-select’ and set the value to ‘none’. I’m still looking for where I put that code and if I find it I’ll write back.

1 Like

Thanks for the reply! Was very surprised to see this today haha

Yup, that is the most logical spot I could think to put it as well. Weird that it doesn’t work for me.

Weirder still is that this is the only thread I can find on the whole of the Internets that pertains to this issue. I may submit a ticket today, I usually get a response within a day or so.

I’ll let you know what they say if you’re curious.

Yes I am definitely interested. I also agree that it is weird there are not more instances of this across the Internet. I found that answer on a web development forum a couple years ago and when I tested it , it did work, it was just a question of how to fit it into ignition.