QHMの新タイプHAIKの活用と実験、オープンソースの活用

[ JQuery ]

Enterでフォーカス移動02

• 2013-12-08 〜
• 2013-12-09 次にジャンする方法の調整。説明を追加しました。

説明など

• Enterで上から下、左から右へ入力項目のフォーカスを移動する。
• 上矢印で逆に移動
• フォーカス移動する要素には属性として「ex="enter"」を設定します。
• フォーカスをジャンプする時は、属性として「nextFocus="次のID"」として設定しいます。最後にEnterが押された時に最初に戻る時などに利用する機会があると思われます。
• 参考にしたスクリプトはkeypressでしたが、上下の矢印などがそのままでは取得出来ないようだったので、keydownで処理するようにしました。(Enterが13,上矢印が38)
• ページが最初に表示された時にフォーカスがどの入力欄にも無いですが、その場合場合は、focusStartId 変数で指定した名前にフォーカスを移動するようにしています。この機能は、現在IE8などでは動作しません。(2013-12-09)

今後の確認事項

• 伝票などの入力を想定した時、コード入力後の商品検索などのイベントがシンプルに処理出来るか。
• jQuery UIのダイアログを表示した場合にどの様な挙動になるか。

Enterでフォーカス移動03、Enterでフォーカス移動04では、Ajaxテストで利用したスクリプトにEnterでのフォーカス移動を追加し、更にテストを追加しています。

動作テスト

スクリプト

<link rel="stylesheet" href="./jquery/css/redmond/jquery-ui-1.10.3.custom.css">
<script src="./jquery/js/jquery-1.9.1.js"></script>
<script src="./jquery/js/jquery-ui-1.10.3.custom.js"></script>
 
<script>
$(function() {
  focusColor   = '#EEEECC';
  noFocusColor = '#FFFFFF';
  focusStartId = '#abcd_01';
 
  html = "";
 
  html += '<input type="text" class="midasi" size="5" value="CD">';
  html += '<input type="text" class="midasi" size="30" value="品名">';
  html += '<input type="text" class="midasi" size="10" value="単価">';
  html += '<input type="text" class="midasi" size="5" value="数量">';
  html += '<input type="text" class="midasi" size="12" value="金額"><br>'+"\n";
 
  for (i=0; i<50; i++){
    html += '<input type="text" id="auto_0_'+i+'" class="scode" size="5" ex="enter">';
    html += '<input type="text" id="auto_1_'+i+'" class="sname" size="30">';
    html += '<input type="text" id="auto_2_'+i+'" class= "stanka" size="10">';
    html += '<input type="text" id="auto_3_'+i+'" class="snum" size="5" ex="enter">';
    html += '<input type="text" id="auto_4_'+i+'" class="skei" size="12">'+"<br>\n";
  }
  $("#script01").html(html);
 
 
  $("body").keypress(function(e) {
        var id = $(':focus').attr("id");
        if (typeof id === "undefined") {
          $(focusStartId).focus();
        }
  });
 
  var elements = "*[ex=enter]";
  $(elements).keydown(function(e) {
    var c = e.which ? e.which : e.keyCode;
    if (c == 13 || c==38) {
      var index = $(elements).index(this);
      var firstElement = $(this).attr("nextfocus");
      if (typeof firstElement === "undefined") {
        if (c==13) {
          $(elements + ":gt(" + index + "):first").focus();
        } else {
          $(elements + ":lt(" + index + "):last").focus(); 
        }
      } else {
        $("#"+firstElement).focus();
      } 
      e.preventDefault();
    } 
  });
 
  $(".midasi").css("textAlign","center");
  $(".midasi").css("backgroundColor","#CCCCCC");
  $(".stanka,.snum,.skei").css("textAlign","right");
 
  $("input,select").css("border","solid 1px #CCCCCC");
 
  $("input,select").focus(function(){
    $(this).css("background-color",focusColor);
  });
 
  $("input,select").blur(function(){
    $(this).css("background-color",noFocusColor);
  });
 
  $(".scode").keyup(function() {
    str = $(this).val();
    if (str.length>5) {
       id = $(this).attr("id");
       //alert(id+":"+str);
       f = id.split("_");  // auto_列(0〜)_行(0〜)
       $("#auto_1_"+f[2]).val("品名"+str);
       tanka = Math.round(str * 0.05);
       $("#auto_2_"+f[2]).val(tanka);
    }
  });
 
  $(".snum").keyup(function() {
    str = $(this).val();
    if (str.length>0) {
       id = $(this).attr("id");
       //alert(id+":"+str);
       f = id.split("_");  // auto_列(0〜)_行(0〜)
       tanka = $("#auto_2_"+f[2]).val()*1;
       number = str * 1;
       kei = (tanka * number)+"";
       $("#auto_4_"+f[2]).val(kei);
 
    }
  });
 
 
});
 
 
</script>
 
 
<input type="text" id="abcd_01" ex="enter">
<input type="text" id="abcd_02" ex="enter">
<input type="checkbox" id="chk_06" ex="enter">
<input type="checkbox" id="chk_07" ex="enter">
<input type="text" id="abcd_03" ex="enter">
<input type="text" id="abcd_04" ex="enter">
<br>
<br>
Enterでカーソルを移動しない物<br>
<input type="text" id="abcd_05"><br>
<input type="checkbox" id="chk_08"> ほげほげ１<br>
<input type="checkbox" id="chk_09"> ほげほげ２<br>
<br>
<br>
再びEnterでカーソルを移動の対象<br>
<input type="text" id="abcd_10" ex="enter"><br>
<br>
スクリプトでINPUTタグを作成<br>
<div id="script01"></div>
再び通常のタグ<br>
<input type="text" id="abcd_11" ex="enter">
<br>
<select name="aaaa" id="select_01" ex="enter">
<option value="111111111">111111111111</option>
<option value="222222222">222222222222</option>
<option value="333333333">333333333333</option>
<option value="444444444">444444444444</option>
</select>
 
<input type="checkbox" id="chk_08" ex="enter" nextFocus="abcd_01">