1. TOP
  2. javascript

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

カテゴリ:
javascript
Web
| トラックバック(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桁になっている。

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


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


参考

[pushState + ajax] ページの動的遷移 PJAXを実装してみよう・・・?

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

今更誰にも聞けないPJAXの実装をやる。他ページの特定のDOM内をシームレスに持ってこれる。しかも高速。URLも綺麗。SEO的にも問題ない。特ダネじゃないか。

で、3つくらいあるみたいなんだけど、何が違うのか解らない。この時点で詰んでるし面倒くさい。とりあえずjquery-pjaxから実装してみる。

コード

jQuery PJAX(defunkt版)を使って検索結果の表示とURLをシームレスに切り替える。

html

	

javascript



公式ではこんな感じな筈。

[js] #jsdo.it levGatheringLine js+HTML5 「canvasでパーティクルを操作」

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

Flash版はこちら

サムネイル

160809img01.jpg

[html/js] もうjs/jQueryを使うときはデータ属性(data-*)でなんとかして

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

みたい。いや、そうしていくべきなんじゃないの?で、IDとclassはcssでのデザイン関係のみにして切り分けるとかどうだろうか。いや解らない。けどまぁこんな感じで。


ページの先頭に戻る