1. TOP
  2. javascript

[js] HTMLのimgタグを修正せずに別の画像がある場合は置き換える

カテゴリ:
Web
javascript
| トラックバック(0)
投稿者:yo yo
// JavaScript Document
jQuery(function(){
	jQuery("img").each(function(){
		var target = jQuery(this);
		var src = target.attr("src");
		var src_split = src.split(/(?=\.[^.]+$)/);
		var src_sp = src_split[0] + '-sp' + src_split[1];
		target.attr('data-src', src);
        // ここの部分は
		var img = new Image();
		img.src = src_sp;
		img.onload = function() {
			target.attr('data-sp-src', src_sp);
		}
        //
        /* こういう書き方もできる
            var x = new XMLHttpRequest();
            x.open("HEAD", src_sp, false);
            x.send(null);
            x.status; // 404 or 他を判定
        */
	});
	
	// カスタムイベントで画像切り替えのコードとか
	
});

「ウェブサイトのレスポンシブ化対応などで既存のHTMLを修正したくない。けど、スマホ向け画像があったらそっちを表示させたい。」とかいう場合に使う。Javascriptで画像の有無を調べてある場合はそちらを表示、ない場合は既存を表示させる。

[js] ブラウザのJavascriptが有効かどうか調べてcssのクラス名を切り替える

カテゴリ:
javascript
| トラックバック(0)
投稿者:yo yo
<!DOCTYPE html>
<html lang="ja" class="no-js">
<head>
<title>Javascriptが有効かどうか調べる</title>
<script>
/*JavaScriptの検出*/
(function(html){
	html.className = html.className.replace(/\bno-js\b/,'js')
})(document.documentElement);
</script>
</head>
<body>
</body>
</html>

Wordpressの公式テーマでも使われている昔からあるヤツ。ブラウザのjsが有効ならclass no-jsがjsに変わる。

[js] 特定の文章をボタンクリックでクリップボードにコピーさせる

カテゴリ:
Web
javascript
| トラックバック(0)
投稿者:yo yo

特定の文章をボタンクリックでクリップボードにコピーさせるアレ




[js] スマホのjQueryタッチイベント取得に関しての挙動

カテゴリ:
Web
javascript
| トラックバック(0)
投稿者:yo yo

jQueryのバージョンは1.9.1、Androidバージョン7.0のchrome、iOS 10.3.1のsafariの実機で確認。2017年4月24日。

touchstart

// タッチした時に発生
// Android 反応◎ return false、iPhone 反応× return true。
jQuery("#target").on('touchstart',function() {
  alert('タッチ');
});

touchend

// タッチして離した時に発生
// Android 反応◎ return true、iPhone 反応× return true。
jQuery("#target").on('touchend',function() {
  alert('タッチ');
});

AndroidもiPhoneも、touchendイベントはタップしたままで#targetから指をずらし、指を離してもイベントが発火する。

イベントの反応速度的には<a onclick=""></a>とかやったほうが早い。

[js] 電話番号のフォーマット、フォームでのバリデーション的なアレ

カテゴリ:
Web
javascript
| トラックバック(0)
投稿者:yo yo

電話番号のパターン

国内固定番号系10桁、最初の桁は「0」
0XXXX X XXXX5桁-1桁-4桁
0XXX XX XXXX4桁-2桁-4桁
0XX XXX XXXX3桁-3桁-4桁
0X XXXX XXXX2桁-4桁-4桁
フリーダイヤル、ナビダイヤル、Q2 (0120,0800,0570,0990)
0XX0 XXX XXX4桁-3桁-3桁
携帯、PHS、IP電話等(020,050,060,070,080,090)11桁、最初の桁は「0」
0X0 XXXX XXXX3桁-4桁-4桁
特番系(110、199他)3桁、最初の桁は「1」
1XX3桁

イメージとコード

フォームに入力された電話番号のjavascriptでのバリデートの流れ。ハイフン有り無しでも正確に判別できるようにする。細かくやるなら「先頭が090か」など逐一条件分岐する。

  1. 先頭が0である
  2. ハイフン(-)でsplitすると、1つ(ハイフン未入力時)、もしくは3つ(ハイフン入力時)に分割できる
  3. ハイフン(-)を除いて10~11桁である
  4. splitした3つの内、1つ目の番号の塊が3桁、2つ目・3つ目が4桁になっている。
  5. splitした3つの内、1つ目の番号の塊が2~5桁、2つ目が1~4桁、3つ目が4桁になっている。

だいたいこんなイメージで下記の様な感じに書く。とりあえずのメモ。コピペしても動きません。


入力欄からハイフンをそもそも消してしまう場合はコレを記述する


参考

ページの先頭に戻る