JavaScript memo
JavaScriptで選択したファイルを背景画像にする
HTMLのinputで選択した画像ファイルをJavaScriptでページの背景画像に設定したいより
<!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で開かれたウィンドウのみ
ヒストリーバックで戻ってきたらもう１つヒストリーバックする
- 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();
- 無精・短気・傲慢