The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Problem | text is selected but not show up the copy/cut bar on ios mobile
eldare1
post Aug 27 2016, 07:49 AM
Post #1





Group: Members
Posts: 5
Joined: 25-August 16
Member No.: 24,725
Hi,
Im trying to use this code:

<textarea onclick="this.setSelectionRange(0, 9999);">My text will be selected when textarea is clicked.</textarea>

when I click the text its select all by one click but it doesnt open the copy bar.

this is how it look:
IPB Image

how it should be:
IPB Image


How can I fix it? Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 27 2016, 08:24 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
That's normal, setSelectionRange only highlights text (I'd rather use

CODE
this.setSelectionRange(0, this.value.length);

though).

Copying text to the clipboard is a different thing, and I'm not sure of browser support. See e.g. https://www.sitepoint.com/javascript-copy-to-clipboard/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
eldare1
post Aug 27 2016, 01:58 PM
Post #3





Group: Members
Posts: 5
Joined: 25-August 16
Member No.: 24,725
Thanks christian, I tried this code but still only select with showing up the copy/cut bar I will check the link you provide .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
eldare1
post Aug 28 2016, 11:19 AM
Post #4





Group: Members
Posts: 5
Joined: 25-August 16
Member No.: 24,725
QUOTE(Christian J @ Aug 27 2016, 08:24 AM) *

That's normal, setSelectionRange only highlights text (I'd rather use

CODE
this.setSelectionRange(0, this.value.length);

though).

Copying text to the clipboard is a different thing, and I'm not sure of browser support. See e.g. https://www.sitepoint.com/javascript-copy-to-clipboard/


just Try to use the code from the website you provide, try it on iphone its says "copied" but didnt copy anything..

<html>
<head>
<style>
body {
font-family: sans-serif;
font-size: 1em;
color: #333;
background-color: #ddd;
}

label {
clear: both;
display: block;
font-size: 0.85em;
font-weight: bold;
padding: 0.8em 0 0.2em 0;
user-select: none;
}

input, button {
float: left;
font-size: 1em;
padding: 3px 6px;
margin: 0;
border: 1px solid #333;
outline: 0;
box-shadow: none;
}

::-moz-focus-inner {
padding: 0;
border: 0;
}

input {
width: 15em;
background-color: #fff;
border-right: 0 none;
border-radius: 3px 0 0 3px;
}

button {
position: relative;
background-color: #aaa;
border-radius: 0 3px 3px 0;
cursor: pointer;
}

.copied::after {
position: absolute;
top: 12%;
right: 110%;
display: block;
content: "copied";
font-size: 0.75em;
padding: 2px 3px;
color: #fff;
background-color: #22a;
border-radius: 3px;
opacity: 0;
will-change: opacity, transform;
animation: showcopied 1.5s ease;
}

@keyframes showcopied {
0% {
opacity: 0;
transform: translateX(100%);
}
70% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
}
}
</style>

</head>


<body>

<script>
/*
Copy text from any appropriate field to the clipboard
By Craig Buckler, @craigbuckler
use it, abuse it, do whatever you like with it!
*/
(function() {

'use strict';

// click events
document.body.addEventListener('click', copy, true);

// event handler
function copy(e) {

// find target element
var
t = e.target,
c = t.dataset.copytarget,
inp = (c ? document.querySelector© : null);

// is element selectable?
if (inp && inp.select) {

// select text
inp.select();

try {
// copy text
document.execCommand('copy');
inp.blur();

// copied animation
t.classList.add('copied');
setTimeout(function() { t.classList.remove('copied'); }, 1500);
}
catch (err) {
alert('please press Ctrl/Cmd+C to copy');
}

}

}

})();

</script>



<label for="website">Website:</label>
<input type="text" id="website" value="this is test" />
<button data-copytarget="#website">copy</button>

<label for="twitter">Twitter:</label>
<input type="text" id="twitter" value="this is test" />
<button data-copytarget="#twitter">copy</button>

</body>

</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 28 2016, 11:54 AM
Post #5


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
Yes the page does say

QUOTE
Most browsers support the clipboard but forget Safari on Mac and iOS.

and according the user comments, the script also fails to detect the lack of support in Safari.

However, one of the user comments also linked to this page about future Safari 10 support:

QUOTE
Use JavaScript commands to programmatically cut and copy text to the clipboard with document.execCommand('cut') and document.execCommand('copy').
https://developer.apple.com/library/prerele...afari_10_0.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 23rd April 2024 - 07:54 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC