ブラウザの違いで気付いたこと。

yizm

5年前

前回の投稿のすぐあとに気付いたこと。

サンプルのページを自分でいじってて、あれっ？ってなった。

１．ＩＥだと方向キーでセル移動できるけど、Chromeだと動かない。

keydownイベントのe.keycodeは非推奨らしい。

keyを使った方がいいっていう情報も見つけたけど、keyもブラウザによって名前が違うとか・・・。

とりあえず、IEとChromeはkey調べてコードを直して見た。

今度、Firefoxとか他のブラウザも使って調べて見よう。

    $(document).keydown(function(e){
      var cursor = function() { return ($("#edit_target").length) ? false : ($(".selected").length) ? true : false; }
      
      switch (e.key) {
        case "Esc":
        case "Escape":
          var adrs = $("#edit_target").attr("data-address");
          if (adrs == undefined) { return }
          $("#edit_target").remove();
          $("td[data-address='" + adrs + "']").toggleClass("editing", false);
          editable_table.Recalculation();
          break;
        case "Left":
        case "ArrowLeft":
          if (cursor()) { editable_table.Offset(0,-1) }
          break;
        case "Up":
        case "ArrowUp":
          if (cursor()) { editable_table.Offset(-1,0) }
          break;
        case "Right":
        case "ArrowRight":
          if (cursor()) { editable_table.Offset(0,1) }
          break;
        case "Down":
        case "ArrowDown":
          if (cursor()) { editable_table.Offset(1,0) }
          break;
      }
    });

$(document).keydown(function(e){

var cursor = function() { return ($("#edit_target").length) ? false : ($(".selected").length) ? true : false; }

switch (e.key) {

case "Esc":

case "Escape":

var adrs = $("#edit_target").attr("data-address");

if (adrs == undefined) { return }

$("#edit_target").remove();

$("td[data-address='" + adrs + "']").toggleClass("editing", false);

editable_table.Recalculation();

break;

case "Left":

case "ArrowLeft":

if (cursor()) { editable_table.Offset(0,-1) }

break;

case "Up":

case "ArrowUp":

if (cursor()) { editable_table.Offset(-1,0) }

break;

case "Right":

case "ArrowRight":

if (cursor()) { editable_table.Offset(0,1) }

break;

case "Down":

case "ArrowDown":

if (cursor()) { editable_table.Offset(1,0) }

break;

}

});

Esc⇔Escape、Left⇔ArrowLeft・・・・軒並み違うじゃないかっ！！

２．スマホのブラウザには、ダブルクリックの概念がない。

セル編集できるかなー？

ぽちぽちっ　すぅぃーん（ズーム）

ぽちぽちっ　すぅぃーん（ズームアウト）

ふーん・・・。なるほどねー。ってなった。

それで、選択中のセルをもう一度クリックしたら編集に切り替わる様に

クリックイベント側に選択状況のチェックと強制的にダブルクリック発火を仕込んでみた。

      $td.click(function () {
        var $this = $(this);
        if ($this.hasClass("selected")) {
            $this.trigger("dblclick");
        } else {
          editable_table.ClearSelectionCells();
          $this.toggleClass("selected", true);
        }
      });

$td.click(function () {

var $this = $(this);

if ($this.hasClass("selected")) {

$this.trigger("dblclick");

} else {

editable_table.ClearSelectionCells();

$this.toggleClass("selected", true);

}

});

今まで、クライアントの業務系アプリばっかり触ってたから

Webの常にクロスプラットフォームを意識する考え方は新鮮で勉強になりますね。