トップ 差分 一覧 ソース 検索 ヘルプ PDF RSS ログイン

JavaScript memo

JavaScriptで選択したファイルを背景画像にする

HTMLのinputで選択した画像ファイルをJavaScriptでページの背景画像に設定したいより

サンプル GitHub

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>JavaScriptで選択したファイルを背景画像にする</title>
</head>
<body>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const f=document.querySelector('#f');
  f.addEventListener('change',()=>{
    const content = f.files[0];
    const blob=new Blob([content],{type:f.type});
    document.body.style.backgroundImage=`url(${URL.createObjectURL(blob)})`;
  });
});
</script>
<input type="file" id="f">
</body>
</html>

入力できるプルダウンボックス(セレクトボックス)

入力できるプルダウンボックス(セレクトボックス)

$('.free_dropdown').on('click focus', function () {

//「input」要素の「data-options」をカンマで分割し、配列にする。
var options = $(this).data("options").split(',');

$(this).autocomplete({
		source: options,
		minLength: 0,  // 「0」を設定したら、全ての項目を表示する。
		delay : 1,
		autoFocus: false,
		scroll:true,
        position:{ my : "right top", at: "right bottom", collision: "flip" } //不具合対応

});

$(this).autocomplete("search", "");//この行を入れないと、初回にプルダウンボックス(セレクトボックス)が効かないという不具合がある

});

実装してみる

サンプル

<html lang="ja">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
       <title>入力できるプルダウンボックス</title>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
       <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
       <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   </head>
   <body>
       <h1>入力できるプルダウンボックス</h1>
       全表示:<input type=text id=in01 name=in01 class="suggest"><br>
       検 索:<input type=text id=in02 name=in02 class="suggest">
       <script>
           var suggestList01 = ['perl','ruby','Python','PHP','javaScript','AWK','bash','java','COBOL','C','C++',];
           $('#in01').autocomplete({
               minLength: 0,
               source: function(req,res) {
                   res(suggestList01);
               },
           });
           $('#in02').autocomplete({
               minLength: 0,
               source: function(req,res) {
                   res($.grep(suggestList01,function(v){
                       return v.toLowerCase().indexOf(req.term.toLowerCase()) >= 0;
                       })
                   );;
               },
           });
           $(document).on('focusin','.suggest',function() {
               $(this).autocomplete('search','');
           });
       </script>
   </body>
</html>

ローカルファイルを読み込む

ローカルファイルの読込より

デモ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>File 読み込み</title>
  <script>
    <!--
      function init(){
        var file = document.querySelector('#getfile');
        // input 変化時に読み込む
        file.onchange = function (){
          var fileList = file.files;
          var reader = new FileReader();
          reader.readAsText(fileList[0]);
          //読み込み後表示
          reader.onload = function  () {   
            document.querySelector('#preview').textContent = reader.result;
          };
        };
      };
    // -->
  </script>
</head>
<body onload="init();">
  <input type="file" id="getfile" accept="text/*" >
  <pre id="preview" ></pre>
</body>
</html>

JavaScript プログラミング講座 より 

<!DOCTYPE html>                                                                                                                                                                                         <head lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ファイル読み込み</title>
    </head>
    <body>
JavaScript プログラミング講座  https://hakuhin.jp/js/file_reader.html

<input type="file" id="input_02_file" style="width:100%; margin:0px 0px 10px 0px;" />
結果:<br>
<textarea id="edit_02_result" style="width:100%; height:200px; margin:0px 0px 5px 0px;" disabled></textarea>

<script type="text/javascript">
<!--
// 匿名関数内で実行
(function (){

   // 各エレメントを取得
   var element_file = document.getElementById("input_02_file");
   var element_result = document.getElementById("edit_02_result");

   // ------------------------------------------------------------
   // サポート状況
   // ------------------------------------------------------------
   if(!window.File){
       element_result.value = "File クラスに対応していません。";
       return;
   }
   if(!window.FileReader){
       element_result.value = "FileReader クラスに対応していません。";
       return;
   }

   // ------------------------------------------------------------
   // 値が変化した時に実行されるイベント
   // ------------------------------------------------------------
   element_file.addEventListener("change" , function(e){

       // ファイルが選択されたか
       if(!(element_file.value)) return;

       // ------------------------------------------------------------
       // File オブジェクトを取得(HTML5 世代)
       // ------------------------------------------------------------
       // ファイルリストを取得
       var file_list = element_file.files;
       if(!file_list) return;

       // 0 番目の File オブジェクトを取得
       var file = file_list[0];
       if(!file) return;

       // ------------------------------------------------------------
       // FileReader オブジェクトを生成
       // ------------------------------------------------------------
       var file_reader = new FileReader();
       // ------------------------------------------------------------
       // テキストとして読み込む
       // ------------------------------------------------------------
       //if(file.type.indexOf("text") == 0 ){
       if(file.type.match(/(text|json)/)){

           // ------------------------------------------------------------
           // 読み込み成功時に実行されるイベント
           // ------------------------------------------------------------
           file_reader.onload = function(e){
               element_result.value = file_reader.result;
           };

           // ------------------------------------------------------------
           // 読み込みを開始する(テキスト文字列を得る)
           // ------------------------------------------------------------
           file_reader.readAsText(file);


       // ------------------------------------------------------------
       // バイナリとして読み込む
       // ------------------------------------------------------------
       }else{

           // ------------------------------------------------------------
           // 読み込み成功時に実行されるイベント
           // ------------------------------------------------------------
           file_reader.onload = function(e){
               var result = "";
               var ary_u8 = new Uint8Array(file_reader.result);
               var i;
               var str;
               var num = ary_u8.length;
               for(i=0;i<num;i++){
                   if(ary_u8[i] < 0x10){
                       str = "0" + ary_u8[i].toString(16);
                   }else{
                       str = ary_u8[i].toString(16);
                   }

                   if((i % 16) == 0){
                       result += str;
                   }else if((i % 16) == 15){
                       result += " " + str + "\n";
                   }else{
                       result += " " + str;
                   }
               }
               element_result.value = result;
           };

           // ------------------------------------------------------------
           // 読み込みを開始する(ArrayBuffer オブジェクトを得る)
           // ------------------------------------------------------------                                                                                                                                         file_reader.readAsArrayBuffer(file);

       }
   });                                                                                                                                                                                                 
})();
//-->
</script>
    </body>
</head>

クリップボードにコピーする

クリップボードにコピーするするスクリプトデモ

   // クリップボードにコピー
   function clipboardCopy(text){
   	// テキストエリアを作成
   	let $textarea = $('<textarea></textarea>');
   	// テキストエリアに文章を挿入
   	$textarea.text(text);
   	// テキストエリアを挿入
   	$('body').append($textarea);
   	// テキストエリアを選択
   	$textarea.select();
   	// コピー
   	document.execCommand('copy');
   	// テキストエリアの削除
   	$textarea.remove();
   }

jquery $.each()

$.each() は配列やハッシュに対して繰り返し処理を行う。

$.each() は以下のように記述します。

$.each(対象のオブジェクト, function(index, val) {
 繰り返し実行する処理
});)

each() を途中で終了させる

each() を途中で終了させる(いわゆる break 文を実行する(perl:last))場合は、終了を行いたい箇所で return false を記述します。

each() の処理を次へジャンプさせる

each() の処理を次へジャンプさせる(いわゆる continue 文を実行する(perl:next)場合は、ジャンプを行いたい箇所で return true を記述します。

window.close() でタブが閉じない時の解決法

JavaScriptで閉じることができるウィンドウは、JavaScriptで開かれたウィンドウのみ

ヒストリーバックで戻ってきたらもう1つヒストリーバックする

  • 0:通常アクセス
  • 1:再読み込み
  • 2:履歴よりアクセス
           window.addEventListener('pageshow',()=>{
               var flg=window.performance.navigation.type;
               if(flg == 2){
                   history.back();
               }else{
                   $("#cmdDecide").click();
               }
           });

window.performance.navigation.typeは非推奨になったのでPerformanceNavigationTimingから取得する。

ただし PerformanceNavigationTiming というオブジェクトがあるわけではありません。実際に使用する場合は performanceオブジェクトからプロパティにアクセスする必要があります。

       window.onload = function() {  
               var perfEntries = performance.getEntriesByType("navigation");
               perfEntries.forEach(function(pe){
                   switch( pe.type ){
                       case 'back_forward':
                           history.back();
                           break;
                       default:
                           $("#cmdDecide").click();
                   }
               });
       }

[上][下]ボタンで行を入れ替え

   <script type="text/javascript">

   var selectrow = '';
   var selectid = '';

       $(function () {
            $('.Sel').bind('click', function(){
               mytr =$(this).closest('tr');
               if ($(mytr).hasClass("selected")) {
                   $(mytr).removeClass("selected");
                   selectrow = "";
                   selectid = "";
               } else {
                   if(selectid != ""){
                       $(selectid).removeClass("selected");
                   }
                   selectrow = $(this).closest('tr');
                   selectid = mytr;
                   $(mytr).addClass("selected");
               }
               btnUpDownDisable();
           });
           //上に移動ボタン押下時のイベント処理
           $("#cmdUp").on("click", function() {
               var row_prev = selectrow.prev('tr');
               if(selectrow.prev.length){
                   selectrow.insertBefore(row_prev);
                   $(selectid).get(0).scrollIntoView({block: 'center'});
               }
               renumber('#bodyApplication');
           });
           //下に移動ボタン押下時のイベント処理
           $("#cmdDown").on("click", function() {                                                                                                                                                                      var row_next = selectrow.next('tr');
               if(row_next.length){
                   selectrow.insertAfter(row_next);
                   $(selectid).get(0).scrollIntoView({block: 'center'});
               }
               renumber('#bodyApplication');
           });
       });
       //上下移動ボタン活性・非活性制御
       function btnUpDownDisable(){
           if(selectrow == ''){
               $("#cmdUp").prop("disabled",true);
               $("#cmdDown").prop("disabled",true);
           }else{
               $("#cmdUp").prop("disabled", false);
               $("#cmdDown").prop("disabled", false);
           }
       }

ドラッグアンドドロップでテーブルの行を入れ替える

           <table id="tblApplication">
               <tr><th class="alignHCenter">表</th>
                   <th class="alignHCenter">申請書名</th>
                   <th class="alignHCenter">電子申請可否</th></tr>
               <tbody id="bodyApplication">
               </tbody>
           </table>
   <script type="text/javascript">
   var lineNum = -1;
<?php
   foreach($ref as $row){                                                                                                                                                                              
?>
       lineNum++;
       dispNum = lineNum + 1;
       var lineData = '';
       lineData += '<tr id="'+lineNum+'" class="high-light-row" >';
       lineData += '<td id="ord Sel'+lineNum+'" class="Number Sel">'+dispNum+'</td>';
       lineData += '<td class="Sel"><?=$row["vchReportName"]?></td>';
       var umu = '<td><select id="umu'+lineNum+'"><option value="有">電子申請する</option><option value="無">電子申請しない</option></select></td>';
       lineData += umu;
       lineData += '</tr>';
       $('#bodyApplication').append(lineData);
       if("<?=$row['chrWebAppInput']?>" !== '1'){
           $("#umu"+lineNum).val("無");
       }
<?php
   }
?>
   //テーブルのドラッグアンドドロップを有効化
   $('#bodyApplication').sortable();

   //初期状態の表示順を取得
   var curOrderAry = $('#bodyApplication').sortable("toArray");

   //順序が入れ替わった際に表示順をUPDATE
   $('#bodyApplication').on("sortupdate", function(ev, ui) {

       //現在の表示順を取得
       var tmpOrderAry = $(this).sortable("toArray");

       var updList = [];
       var num = 0;
       $.each(tmpOrderAry, function(ix, value){
           $('#ord'+value).text(++num);
       });


   });
   </script>

HTML要素の位置までスクロールさせたい時

element.scrollIntoView() 参照

scrollIntoView() メソッドは、要素が(ブラウザのウィンドウ上の)表示範囲に入るまでページをスクロールします。

  • 引数を省略または true とすることで上端に来るようにスクロールし、false ならば下端に来るようにスクロールします。
  • オプション設定もできる
element.scrollIntoView({
  behavior: 'auto',
  block: 'center',
  inline: 'nearest',
});

無駄にスクロール位置の計算をしなくても済みそうですね。

webStorage

webPageの状態を保持するのにはセッションストレージを使うと簡単に状態を維持できます。sessionStorageを使いパネルの状態を復元する

sessionStorage

  • sessionStorage.setItem(key,value)
  • sessionStorage.getItem(key)
  • sessionStorage.removeItem(key)

QRコード

サンプル

<html>
   <head>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
       <script src="jquery-qrcode-0.18.0.min.js"></script>
   </head>
   <body>
       <div id="qrcode"></div>
       <script>
           $('#qrcode').qrcode({width: 64, height: 64, text: "information"});
       </script>
   </body>
</html>

QRコードをダウンロード

               let canvas = $('#qrcode canvas');
               let link = document.createElement("a");
               link.href = canvas[0].toDataURL("image/png");
               link.download = "qrcode.png";
               link.click();