JavaScript

javascriptでcheckboxの操作

  • 2020.07.26

javascriptでのcheckboxの操作がわからなくなってしまうことがあるので、その方法をメモ書き程度にまとめておきます。 ここでは、jqueryを使った方が簡単なので、その方法を掲載します。 チェックボックスの値を取得 チェックボックスのON/OFF チェック状態の確認

javascriptでページ読み込み中を表示させる

  • 2020.07.26

ここでは、Javascriptを使ってバックグラウンドで処理中にページ読み込み中のを表示させるサンプルを紹介します。 仕組みは、簡単です。 まず、初期値は、ローディング中のDIVを非表示にしておき、バックグラウンド処理を行う時にメインコンテンツを非表示にし、ローディング中を表示させるのみです。そして、バッググランド処理が終わったらその逆を行うだけです。 サンプルは下記になります。 HTML Jav […]

Exifを判定(iPhone画像が回転してしまう原因)

  • 2020.06.30

iphoneで撮影した画像をブラウザに表示すると回転してしまう現象が発生したので調査をしました。 現象 iphoneで撮影した画像をcssのbackground-imageを使って表示させる。 なぜか下記のように回転をしてしまいました。 回転してしまう原因 原因は、画像のExif情報を見て、自動で回転して正しい方向に直して表示してくれるブラウザ、画像のExif情報を見ないでそのまま表示するブラウザ […]

JavaScriptでブラウザとバージョンを取得する

  • 2020.06.30

JavaScriptを使ってブラウザとそのバージョンを取得する関数を作成しましたので紹介します。 基本的なことですが、ユーザーエージェントからブラウザ情報を得ます。 ユーザーエージェント ■Windows ▼Google Chrome Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) C […]

JavaScriptでクリップボードへコピーする方法

  • 2020.05.03

ここではJavaScriptを使ってフォームにデータをクリップボードにコピーする方法を紹介します。 ChromeとSafariは、動作検証済みです。ブラウザによって動作しないことがあるかも知れません。 クリップボードへコピー クリップボードへカット

WYSIWYGエディタ「TinyMCE」を組み込む方法

  • 2020.04.20

WYSIWYG(ウィジウィグ)エディタは、MS Wordのように文字のサイズを変更したりすることができるフォームのことをいいます。 ここでは、HTMLにWYSIWYG(ウィジウィグ)エディタの「TinyMCE」を組み込む方法を紹介します。 TinyMCEをダウンロード 公式サイトからダウンロードすることが可能です。 https://www.tiny.cloud/get-tiny/downloads […]

「このサイトを離れますか?」メッセージを表示する方法

  • 2020.04.20

フォームの値を変更中にブラウザの閉じるボタンをクリックしたり、ブラウザの戻るボタンをクリックしたときに、「このサイトを離れますか?」メッセージを表示する方法を紹介します。 ただし、ブラウザによってメッセージが違ったり、動作しなかったりする場合があります。 ChromeとIE、Microsoft Edge、Safariでは動作しました。 メッセージを表示する方法 JQueryとbeforeunloa […]

jQueryのAjaxを使って非同期処理を行う方法

  • 2020.03.29

ここでは、JavaScriptの人気ライブラリであるjQueryのAjaxを使って非同期処理を行う方法を紹介します。 非同期処理とは、ブラウザを更新(リロード)せずにページの内容を変更したりする方法です。 jQueryの使い方 2つの方法があります。 (1)jQuery公式サイトからのJSファイルをダウンロードしてきて使用する。   https://jquery.com/ (2)JSファイルをダウ […]