グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

<input>や<textarea>をクリックした際、中に書かれているテキストを全選択するスクリプトです。要jQuery。
内容をコピーさせたいテキストボックスを作る場合に実装してあると便利です。

$("ID名など").focus(function(){
  $(this).select();
});

FlashでActionScriptを書く際によく使っていたものなのですが、インスタンスに変数などのデータを持たせることができます。
例えば複数のインスタンスの状態を管理するとき、配列などで管理しなくてもそれぞれのインスタンスに直接変数を持たせておけばよいので直感的にできます。

探してみたところJavaScriptにもあるようで、こちらはDOM要素にデータを持たせることができます。要jQueryです。


■格納
jQuery.data(elem, name, value)

（例）jQuery.data($("#target").get(0), "color", "red");


■取得
jQuery.data(elem, name)

（例）jQuery.data($("#target").get(0), "color");
　　// red


実はJavaScriptを使い初めた頃に困ってたことでもあるので、便利に使っていこうと思います。

以前も引っかかったことのある問題なので、忘れないよう書いておこうと思います。

JavaScriptでユーザーエージェントを取得してSafariを判別したい場合、
以下のようになります。
※2018.7.11 コメントでEdgeの件ご指摘いただいたので追記しました
※2016.9.9 ソースの括弧が多かったので修正しました

var ua = window.navigator.userAgent.toLowerCase();

if (ua.indexOf('safari') !== -1){
// ここにSafari用の記述
}

一見正しそうですが、実はこれだと問題が・・。
Google Chromeのユーザーエージェントを見てみます。

例）
Mozilla/5.0 (Windows NT 6.3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36

そこにはSafariの文字が！
ですので上記の振り分けだと、Chromeまで対象になってしまいます。
Safariのみを対象にする場合はChromeを除外して、

var ua = window.navigator.userAgent.toLowerCase();

if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1){
// ここにSafari用の記述
}

とすることで実装できます。


※2018.7.11 追記
さらにEdgeにも Safari の文字が入っているとご指摘いただきました。ありがとうございます。

■Microsoft Edge のユーザーエージェント
mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/64.0.3282.140 Safari/537.36 edge/17.17134

入っています・・。
chrome とも入っているので結果的に chrome 用の記述が効いていますが、
念の為 Edge も追加しましよう。

var ua = window.navigator.userAgent.toLowerCase();

if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1 && ua.indexOf('edge') === -1){
// ここにSafari用の記述
}

これでOKです。

詳しく調べていないのでメモ書き程度ですが、
Android 4.Xのデフォルトブラウザで遭遇した現象について。
INFOBAR A02だけの問題という可能性もあります。


・ページ読み込み時に $(window).height() でウインドウの高さを取得しようとした

・$(function(){ ... }); で取得すると、実際の高さからアドレスバーを引いたくらいの
　高さが取得される

・$(window).bind('load', function(){ ... }); で取得すると正しい高さが取得できる


Android 2.Xでは1つ目の記述で大丈夫でした。

setIntervalに記述した処理は、指定した秒数後に初めて実行されますが、開始時にすぐさま実行させたい場合があると思います。
今までは関数にしておいてsetIntervalと同時に呼び出したりしていましたが（大した手間ではないので）、やっぱり余計な記述はないほうが良いので調べてみました。

setInterval((function hoge() {
  // ここに処理を記述
  return hoge;
}()), 1000);

上記のように書くことで即時実行させることができます。

ソースは下記のサイト様より。
arguments.callee についても書かれていて参考になりました。

setIntervalをaruguments.calleeを使わずに0秒でも発火させる