[ JQuery ]

  • 2013-12-09

実行例


適当なので、どっかへジャンプ:

スクリプトのコード 

<script src="./jquery/js/jquery-1.9.1.js"></script>
<script src="./jquery/js/jquery.maskedinput.js"></script>
 
<script>
  $(function() {
    html_meisai();
    $("*[id^=id1-]").mask("9999999");  // 2013-12-03
    $("*[id^=id1-]").keyup(function() {
      // alert(this.id);
      id12 = this.id.split('-');
      code = $("#"+this.id).val();
      // maskの_をカットする
      code = code.replace('_','');  // 2013-12-03
      if (code.length==7 || code.length==0 ) {
        if (code != '') {
          kekka = search_code(code);
          // alert("Row:"+id12[0]+" / Code:"+code+" / Result:"+kekka);
          fld = kekka.split("\t");
          $("#id2-"+id12[1]).val(fld[6]+fld[7]+fld[8]);
          $("#id3-"+id12[1]).val(fld[3]+fld[4]+fld[5]);
        } else {
          $("#id2-"+id12[1]).val("");
          $("#id3-"+id12[1]).val("");
        }
      }
    });
 
/* ここから */
  focusColor   = '#EEEECC';
  noFocusColor = '#FFFFFF';
  focusStartId = '#id1-0';
 
  $("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();
    } 
  });
 
  $("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);
  });
 
/* ここまで */
 
  });
 
 
 
 
  // ---------------------------------------------
  function html_meisai() {
    html = "<table>\n";
    html += "<tr>";
    html += "<th>行</th>";
    html += "<th>コード</th>";
    html += "<th>住所</th>";
    html += "<th>よみ</th>";
    html += "</tr>";
    for (i=0; i<10; i++) {
      html += "<tr>";
 
      html += "<td class='r0'>"+(i+1)+"</td>";  // 行
      html += inp_text("id1-"+i,"7","r1");      // コード
      html += inp_text("id2-"+i,"30","r2");     // 住所
      html += inp_text("id3-"+i,"30","r3");     // よみ
      html += "</tr>\n";
    }
    html += "</table>\n";
 
   $("#meisai").html(html);
  }
 
  // ---------------------------------------------
  function inp_text(id, size, classN) {
     t = '<td class="'+classN+'"><input type="text" id="'+id
            +'" size="'+size+'" class="'+classN+'" ex="enter"></td>';
 
     return t;
  }
 
  // ---------------------------------------------
  function search_code(code) {
    var csv = $.ajax({
      url: "sample_data/testcsv005.php?code="+code,
      async: false
    }).responseText;
 
    return csv;
  }
 
 
</script>
 
  <div id="meisai"></div>
 
<br>
適当なので、どっかへジャンプ:
<form action="index.php">
<input type="submit"  name="dummy" value="送信">
</form>