'Copy email address' Button not working in Mobile Safari
bertlio opened this issue · 11 comments
The 'Copy email address' Button not copying in Mobile Safari, is there another way around this please?
By the way, the script is great! Thank you so much for that!
Confirmed on iPhoneX iOS, v11
<script>
var copy = function(elementId) {
var input = document.getElementById(elementId);
var isiOSDevice = navigator.userAgent.match(/ipad|iphone/i);
if (isiOSDevice) {
var editable = input.contentEditable;
var readOnly = input.readOnly;
input.contentEditable = true;
input.readOnly = false;
var range = document.createRange();
range.selectNodeContents(input);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
input.setSelectionRange(0, 999999);
input.contentEditable = editable;
input.readOnly = readOnly;
} else {
input.select();
}
document.execCommand('copy');
}
</script>
<input type="text" id="foo" value="text to copy" />
<button onclick="copy('foo')">Copy text</button>
I found this code snippet to be working for Mobile Safari... Maybe we could adapt it to the 'Copy email address' button?
What is the source and licence?
https://stackoverflow.com/questions/32851485/make-clipboard-copy-paste-work-on-iphone-devices
Seems there's no specific licence...
We could move the input textbox away from the screen with css...
Move it where?
If you make some wireframe/mockup drawing i would be happy to make changes. It just has to be super simple to use.
<input type="text" id="foo" value='<?php echo $user->address ?>' style="position:relative;left:-1000px;"/> <button onclick="copy('foo')">Copy text</button>
It seems that this trick only work with textboxes, so I thought of hiding the textbox away from the page view... just an idea...
Or maybe the: "Your mailbox username@website.com is ready."
username@website.com could be a textbox with no borders, so it appears just as a normal sentence...
If hiding things with css could potentially penalize us on the SEO point of view, so I think maybe the username@website.com idea could be better, what's your opinion?