[iOS 10] SafariでカットとコピーがJavaScriptから操作出来るようになりました

iOS 10

#JavaScript

#HTML5

#iPhone

#RIA

#iOS

深澤豪

2016.10.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

SafariでカットとコピーがJavaScriptから操作出来るようになりました

スマホでイライラする時の一つが文字列をコピーする時ではないでしょうか？ iOSでもAndroidでも狙った文字列をコピーするのには注意が必要です。 iOS 10に搭載のSafariでもカットとコピーが可能になりました。10桁とかの xxxコードのコピー など捗りそうです。

動かしてみる

今回はspanの中の文字列をコピーしました。長めのxxxコードをコピーするケースを想定しています。どこをコピーするかの設定が前にありますが、コピー自体はdocument.execCommand('copy');になります。

動くもの

あなたのコードはEDg12xxJe332Fですね。

コード

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Cut/Copy</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
</head>
<body>
  <div>
    <p>あなたのコードは<span id="yourCode">EDg12xxJe332F</span>ですね。</p>
    <button id="copyButton">コードをコピーする</button>
  </div>
</body>
<script>
  var button = document.getElementById('copyButton');
  button.addEventListener('click', function(){
    var yourCode = document.getElementById('yourCode');
    var range = document.createRange();
    range.selectNode(yourCode);
    window.getSelection().addRange(range);
    document.execCommand('copy');
    alert('コピーしたッス');
  });
</script>
</html>