この記事は公開されてから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>
まとめ
iOSユーザーが多く使ってると思われるSafariでも地味に便利な機能が追加されました。Chromeでは既に対応済みですので、スマホ向けのWebとしてCutとCopy機能をつけてユーザビリティの向上に一役買いそうです。