勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Flashを用いずJavaScriptでコピー&カット機能を実装する方法

   2024/01/13  jQuery JavaScript

以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー&カット機能を実装できるらしい。以下に以前の記事とサンプルとソースをメモ。

 

以前の記事

https://taitan916.info/blog/?p=419

 

サンプル

https://taitan916.info/sample/cut_copy/

 

ソース

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>document.execCommandでカット&コピー</title>
</head>
<body>
<textarea class="sample-text">サンプルテキスト</textarea>
<button class="cut btn">カット</button>
<button class="copy btn">コピー</button>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
$('.btn').click(function(){
var key = ( $(this).hasClass('cut') ) ? 'cut' : 'copy';
var text = document.querySelector('.sample-text');
text.select();
try{
var successful = document.execCommand(key);
var msg = successful ? 'success!' : 'error!';
alert( msg );
}catch( err ){
console.log( err );
}
});
});
</script>
</body>
</html>
<html lang="ja"> <head> <meta charset="UTF-8"> <title>document.execCommandでカット&コピー</title> </head> <body> <textarea class="sample-text">サンプルテキスト</textarea> <button class="cut btn">カット</button> <button class="copy btn">コピー</button> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $('.btn').click(function(){ var key = ( $(this).hasClass('cut') ) ? 'cut' : 'copy'; var text = document.querySelector('.sample-text'); text.select(); try{ var successful = document.execCommand(key); var msg = successful ? 'success!' : 'error!'; alert( msg ); }catch( err ){ console.log( err ); } }); }); </script> </body> </html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>document.execCommandでカット&コピー</title>
</head>
<body>
<textarea class="sample-text">サンプルテキスト</textarea>
<button class="cut btn">カット</button>
<button class="copy btn">コピー</button>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
    $('.btn').click(function(){
        var key = ( $(this).hasClass('cut') ) ? 'cut' : 'copy';
        var text = document.querySelector('.sample-text');

        text.select();

        try{
            var successful = document.execCommand(key);
            var msg = successful ? 'success!' : 'error!';
            alert( msg );
        }catch( err ){
            console.log( err );
        }
    });
});
</script>
</body>
</html>

 

その他

利用可能ブラウザはchrome42,firefox41,IE9,Opera29となっており、safariやスマホ端末は無理っぽい。詳細は以下の通り。

https://developer.mozilla.org/ja/docs/Web/API/Document/execCommand#Browser_Compatibility

PCでの利用が前提のページでブラウザもある程度指定可能な、社内向けの管理画面とかで用いるのがよさそう。

 - jQuery JavaScript

  関連記事

jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...

「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法

「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...

PHPとajaxでチャットの作成

■ソース ・index.php <? error_reporting(E_ ...

JavaScriptで数値のカウントアップ及びカウントダウン

JavaScript(一部jQuery)で数値のカウントアップ及びカウントダウン ...

NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え

チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...

S