|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | +<head> |
| 4 | + <meta charset='utf-8'> |
| 5 | + <meta http-equiv='X-UA-Compatible' content='IE=edge'> |
| 6 | + <title>クリップボード行ごとコピー支援</title> |
| 7 | + <meta name='viewport' content='width=device-width, initial-scale=1'> |
| 8 | + <style type='text/css'> |
| 9 | + h1 { font-size: 1.5em; } |
| 10 | + </style> |
| 11 | + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> |
| 12 | + <script language='javascript'> |
| 13 | + function html_escape(str) { |
| 14 | + return [ ['&', 'amp'], ['<', 'lt'], ['>', 'gt'], ['"', 'quot'], ["'", 'apos'] ].reduce( |
| 15 | + (curstr, [char, entname]) => curstr.replace(new RegExp(char, 'g'), `&${entname};`), |
| 16 | + str |
| 17 | + ); |
| 18 | + } |
| 19 | + $(function() { |
| 20 | + console.log('loaded'); |
| 21 | + $('#copy_content_button').on('click', () => { |
| 22 | + const content = $('#copy_content').val(); |
| 23 | + console.log('content: ', content); |
| 24 | + const ul = $('#per_line_result'); |
| 25 | + ul.empty(); |
| 26 | + for ( const line of content.split(/\n/) ) { |
| 27 | + if ( line.match(/^\s*$/) ) continue; |
| 28 | + console.log('line', line); |
| 29 | + const li = $('<li></li>'); |
| 30 | + const line_copy_button = $('<button></button>'); |
| 31 | + line_copy_button.attr('class', 'line_copy_button'); |
| 32 | + line_copy_button.append('コピー'); |
| 33 | + li.append(line_copy_button); |
| 34 | + const line_content = $('<span></span>'); |
| 35 | + line_content.attr('class', 'line_content'); |
| 36 | + line_content.append(html_escape(line)); |
| 37 | + li.append(line_content); |
| 38 | + const line_hidden = $('<input type="input"></input>'); |
| 39 | + line_hidden.val(line); |
| 40 | + line_hidden.attr('class', 'line_hidden'); |
| 41 | + line_hidden.attr('readonly', 'readonly'); |
| 42 | + line_hidden.css('display', 'none'); |
| 43 | + li.append(line_hidden); |
| 44 | + ul.append(li); |
| 45 | + } |
| 46 | + $('ul#per_line_result li').each(function(){ |
| 47 | + const $li = $(this); |
| 48 | + const $input = $li.find('input.line_hidden'); |
| 49 | + $li.find('.line_copy_button').on('click', () => { |
| 50 | + $input.css('display', 'inline'); |
| 51 | + $input[0].select(); |
| 52 | + document.execCommand('copy'); |
| 53 | + $input.css('display', 'none'); |
| 54 | + $li.append('<span class="execinfo" style="color: red;">コピーしたよ</span>'); |
| 55 | + }); |
| 56 | + }); |
| 57 | + }); |
| 58 | + }); |
| 59 | + </script> |
| 60 | +</head> |
| 61 | +<body> |
| 62 | +<h1>クリップボード行ごとコピー支援</h1> |
| 63 | + |
| 64 | +<textarea id="copy_content" rows="15" cols="70"> |
| 65 | +aaa |
| 66 | +bbb |
| 67 | +ccc |
| 68 | +</textarea> |
| 69 | +<div><button id="copy_content_button">上記を行ごとにコピーできるようにする！</button></div> |
| 70 | + |
| 71 | +<ul id="per_line_result"> |
| 72 | +</ul> |
| 73 | +</body> |
| 74 | +</html> |
0 commit comments