!!JavaScriptで選択したファイルを背景画像にする
[HTMLのinputで選択した画像ファイルをJavaScriptでページの背景画像に設定したい|https://teratail.com/questions/359665?rss=all]より
[サンプル|https://qweer.info/example/selectedFileBackground.html] [GitHub|https://github.com/john-smith-7701/mmt/commit/85ed185909681a63e3b72cc0d179427bcad5dac2]
JavaScriptで選択したファイルを背景画像にする
!!入力できるプルダウンボックス（セレクトボックス）
[入力できるプルダウンボックス（セレクトボックス）|https://xiyuan.jp/html/334/]
$('.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", "");//この行を入れないと、初回にプルダウンボックス（セレクトボックス）が効かないという不具合がある
});
!実装してみる
[サンプル|https://qweer.info/autocomplete.html]
入力できるプルダウンボックス
入力できるプルダウンボックス
全表示：
検 索：
!!ローカルファイルを読み込む
![ローカルファイルの読込|https://kurage.ready.jp/jhp_g/html5/localF.html]より
[デモ|https://qweer.info/example/afileread.html]
File 読み込み
![JavaScript プログラミング講座|https://hakuhin.jp/js/file_reader.html] より
ファイル読み込み
JavaScript プログラミング講座 https://hakuhin.jp/js/file_reader.html
結果:
!!クリップボードにコピーする
クリップボードにコピーするするスクリプト[デモ|https://qweer.info/example/clicboardCopy.html]
// クリップボードにコピー
function clipboardCopy(text){
// テキストエリアを作成
let $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() でタブが閉じない時の解決法
*https://qiita.com/heppokofrontend/items/2aaf2c0ca1ce37aa4c45
JavaScriptで閉じることができるウィンドウは、JavaScriptで開かれたウィンドウのみ
!!ヒストリーバックで戻ってきたらもう１つヒストリーバックする
*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();
}
});
}
!![上][下]ボタンで行を入れ替え
!!HTML要素の位置までスクロールさせたい時
!element.scrollIntoView() [参照|https://qiita.com/amamamaou/items/728d571d508347b2bc82]
scrollIntoView() メソッドは、要素が（ブラウザのウィンドウ上の）表示範囲に入るまでページをスクロールします。
*引数を省略または true とすることで上端に来るようにスクロールし、false ならば下端に来るようにスクロールします。
*オプション設定もできる
element.scrollIntoView({
behavior: 'auto',
block: 'center',
inline: 'nearest',
});
無駄にスクロール位置の計算をしなくても済みそうですね。
!!webStorage
webPageの状態を保持するのにはセッションストレージを使うと簡単に状態を維持できます。
[sessionStorageを使いパネルの状態を復元する|https://github.com/john-smith-7701/mmt/commit/64da84b012284cc6f7b89e06cc55bf0e7999a7dc]
!sessionStorage
*sessionStorage.setItem(key,value)
*sessionStorage.getItem(key)
*sessionStorage.removeItem(key)
!!QRコード
[サンプル|https://qweer.info/qrcode.html]
!QRコードをダウンロード
let canvas = $('#qrcode canvas');
let link = document.createElement("a");
link.href = canvas[0].toDataURL("image/png");
link.download = "qrcode.png";
link.click();