フォーカス中にループを実行させるJavascript

フォームにフォーカスしている間だけループで任意の処理を実行し続けるJavascriptを作りました。
スマートフォンの、日本語入力中リアルタイム文字カウントなどに使えます。
ver1.7以上のjQueryが必要です。

  • iOS 7 +
  • Android 2.3 +

動作サンプル

jquery.realtimeEvent.js ダウンロード

currentTargetで無名関数を使わずイベントターゲットを取得

たとえば、jQueryでイベントを設定するとき、こんな書き方をしたことはありませんか?

// フォーカスが外れると改行を削除する
var deleteLinefeed = function(obj) {
	var v = obj.val();
	v = v.replace(/¥n/g, '');
	obj.val(v);
};
$('textarea').on('blur', function(){
	deleteLinefeed($(this));
});

この無名関数が冗長で気になる!
なにより、無名関数で紐付けたら、イベントリスナーを削除しにくいです。

そこで、イベントオブジェクトのcurrentTargetを活用すると
このようにスッキリさせられます。

// フォーカスが外れると改行を削除する
var deleteLinefeed = function(e) {
	var obj = $(e.currentTarget),
	v = obj.val();
	v = v.replace(/¥n/g, '');
	obj.val(v);
};
$('textarea').on('blur', deleteLinefeed);

currentTargetで取得するのは、イベントを紐付けてあるオブジェクトです。
これと似たtargetでは、イベントを発動させたオブジェクトを取得できます。

参考:
三章第五回 イベントオブジェクト — JavaScript初級者から中級者になろう — uhyohyo.net

GoogleMapsAPIでルート検索のよう道筋を表示

スタート地点、ゴール地点、移動手段を指定すると、GoogleMapsAPIの地図上へルート表示できます。

GoogleMapsはデフォルトで最短ルートの道筋をマーキングしてくれるので、
クライアントワークで最寄り駅から目的地までのルートをGoogleMapsで設置するとき、かなり細い路地や、飲み屋街の真ん中を突っ切る表示になってしまうことがあります。
そんなとき応用が効くよう、経由ポイントを設定して道順をカスタマイズする方法もあわせてご紹介します。

“GoogleMapsAPIでルート検索のよう道筋を表示” の続きを読む

jQueryのtriggerはcreateEventで代用

jQueryのtriggerを使うと、すでに付与されているイベントを呼び出して実行できて便利なのですが
プラグインが使えないときもあるため、代用方法を紹介します。

jQueryを使えないときは
createEventでイベントを作成し、initEventで初期化し、dispatchEventで付与しすると
イベントを発火させられます。

この方法は
clickなどの基本的なイベントはIE8以上から対応しており
独自に作成したカスタムイベントは、IE9以上からの対応しています。

なお、triggerがIEのバーションに縛られず実行できるのは
ここで紹介するcreateEventを単純に使っているのではなくjQuery内で独自にオブジェクトを組んで作りこんであるためです。
古いブラウザへの対応が必須だったり、急遽サポート範囲が広がったり、納期がいきなりタイトになるなど心配事があるなら
安定性を考慮して、jQueryが使えるよう働きかけるほうが賢明だと個人的には思います…

“jQueryのtriggerはcreateEventで代用” の続きを読む

半角を0.5文字カウントしてmaxlengthを設定するJavascript

スマートフォン用に、全角文字の場合は1文字、半角文字の場合は0.5文字でカウントして制限文字数をもうけるJavascriptを作りました。
ver1.7以上のjQueryが必要です。

  • iOS 7 +
  • Android 2.3 +

動作サンプル

jquery.countLengthHalf.js ダウンロード

iOS8でwindow.close()が効かないバグ (8.1.1で修正済)

window.close()が効かないバグは
2014年11月のiOS 8.1.1アップデートで無事に修正されていました。

以下は、~8.1.0 時点の記事です。

iOS 8.0.x 8.1.0 のSafariでは
開いているタブを閉じるwindow.close()が使用できないバグがあります。

調査してみたところ、どうやら
window.close()の使い方がマズイのではなく
iOS8のSafariが現時点でこの機能に対応していない旨のやり取りがされていました。

参考:
javascript – window.close() doesn't work on iOS 8 GM seed – Stack Overflow
(Appleのデベロッパーフォーラムは、アカウントがないと見られないので、とりあえずこちらへリンク)

今できる対応策は
同一ウィンドウ内での遷移で代用できるところは
バグ修正がアップデートされるまで、別窓遷移をやめることくらいでしょうか。

iOS 8.0は、他にも致命的なバグを見つけちゃってるので
2014年10月20日のiOS8.1アップデートで修正されてないか期待していたのですが
残念ながらほとんど直っていませんでした orz
たとえば、テキストボックス関連でこんなバグがあります。

“iOS8でwindow.close()が効かないバグ (8.1.1で修正済)” の続きを読む

プレーンなJavascriptでhtmlタグのDOMを取得

javascriptでhtmlタグのDOMを取得したい場合は、この書式になります。

document.getElementsByTagName('html')[0]

たとえば、
スマホ版Facebookの右上にあるスライドインするメニューや
jQuery mobileのPanelのように
ページ全体が横にずれて隣や背面からメニューが現れる仕掛けを自前でつくるとき
メニューを展開したとき、横にずれたぶんだけページに横スクロールが生じてしまいます。
これを防ぐため
htmlにoverflow:hidden;を設定することがあるのですが
Xperia acro でスクロールできなくなるCSSのように
htmlにoverflow:hidden;を設定できないケースもあります。

そんな時は、このように
ユーザーエージェントでXperia acroを判定し
htmlタグに設定してあるoverflow:hidden;のスタイルをnoneに書き換えます。

if(navigator.userAgent.match(/SO-02C|IS11S/i)) {
	document.getElementsByTagName('html')[0].style.overflow = 'none';
}