Falleaves'Blog: 2010

2010年12月30日星期四

Jquery實現按下Enter鍵時自動跳下一輸入欄位

客戶在輸入資料時會使用BarCode機作掃描…
而掃描時會在最後面送一個enter訊號…
所以希望在掃描後能自動跳一欄位繼續輸入...

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(function(){ 
 //送出表單 
 var focusItem = null; 
 var inputs = $('input[type=text]');
 $('input[type=text]').focus( function(){  
  focusItem = inputs.index( $(this) );
 });
 
 $(document).keydown(function(event){   
   if(event.keyCode==13){  //如果按 enter     
   //跳下一個欄位
   inputs.eq(  (focusItem+1) ).focus();
   }
 });
 //為了不讓按下Enter就送出表單，把原本的submit改成button
 //再自己處理submit的按鈕
 $('input[name=mySubmit]').bind('click',function(){
  $('#form2').submit();
 });
});
</script>
<form id="form2" method="post" action="idsk_check.php">
 <input type="text" value="0" />
    <input type="text" value="1" />
    <input type="text" value="2" />
    <input type="text" value="3" />
    <input type="text" value="4" />
</form>

<input name="mySubmit" type="button"  value="Submit"/>

2010年12月21日星期二

實現兩個多重下拉選單中移動所選的項目

先來看Jquery的部分


 $(function() {
    $('#add').click(function() {
        //將select1所選的項目先移除然後放到select2的最下面
        $('#select1 option:selected').remove().appendTo('#select2');
       });
       $('#remove').click(function() {
        //相反的方向
        $('#select2 option:selected').remove().appendTo('#select1');
       });
    //按下送出時只要是select2有的項目就是選取的項目
    //所以還要先將select2有的項目加上己選取才能送出去…
       $('form').submit(function() {
         $('#select2 option').each(function() {
          $(this).attr("selected", "selected");
         });
    });
});

完整程式範例



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript">
$(function() {
 $('#add').click(function() {
  //將select1所選的項目先移除然後放到select2的最下面
     $('#select1 option:selected').remove().appendTo('#select2');
    });
    $('#remove').click(function() {
  //相反的方向
     $('#select2 option:selected').remove().appendTo('#select1');
    });
 //按下送出時只要是select2有的項目就是選取的項目
 //所以還要先將select2有的項目加上己選取才能送出去…
    $('form').submit(function() {
   $('#select2 option').each(function() {
    $(this).attr("selected", "selected");
   });
 });
});
</SCRIPT>
<style type="text/css">
#data a {
 display: block;
 border: 1px solid #aaa;
 text-decoration: none;
 background-color: #fafafa;
 color: #123456;
 margin: 2px;
 clear:both;
}
.div {
 float:left;
 text-align: center;
 margin: 10px;
}
#arrow {
 float:left;
 margin: 10px;
 padding-top: 200px;
}
.select {
 width: 200px;
 height: 350px;
}
</style>
</head>
<body>
兩個多重下拉選單中移動所選的項目
<div id="data">
  <div class="div">
    <select multiple id="select1" class="select">
      <option>111111111</option>
      <option>222222222</option>
      <option>478795333</option>
      <option>478797444</option>
      <option>478797555</option>
      <option>478795666</option>
      <option>478797777</option>
      <option>478797888</option>
      <option>478795999</option>
      <option>478797126</option>
      <option>478797134</option>
      <option>478795343</option>
    </select>
  </div>
  <div id="arrow"> <a href="#" id="add">&nbsp;&nbsp;&gt;&gt;&nbsp;&nbsp;</a> <br />
    <a href="#" id="remove">&nbsp;&nbsp;&lt;&lt;&nbsp;&nbsp;</a> </div>
  <form action="handle.php" method="post">
    <div class="div">
      <select multiple id="select2" name="selectedArr[]" class="select">
      </select>
    </div>
    <input type="submit" value="submit" />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  </form>
</div>
</body>
</html>

範例圖片:

如何實現不按tab鍵自動跳到下一個input欄位

客戶反應希望可以不按tab鍵，就可以自動跳到下一個欄位，加強一下方便性…
這個例子的輸入是一定要滿足最大輸入，
所以移動焦點的觸發條件是檢查目前輸入的內容的長度是否己經等於maxlength…
一、Jquery的部份…

$(function(){
    $('input:first').focus(); 
    $('input').keyup(function(){
        var inputs = $('input'); //先取得所有input元素
        var maxlen = $(this).attr('maxlength');   //取得目前元素的maxlength
        if( $(this).val().length == maxlen ){ //當滿足maxlength時...
            inputs.eq( inputs.index($(this))+ 1 ).focus(); 
   //利用.index算出目前元素是在所有元素中的索引值，再將索引值+1，指向下一個input
        }
    }); 
});

二、完整的程式碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/jquery-1.4.3.min.js"></script>
        <script type="text/javascript">
$(function(){
    $('input:first').focus(); 
    $('input').keyup(function(){
        var inputs = $('input'); //先取得所有input元素
        var maxlen = $(this).attr('maxlength');   //取得目前元素的maxlength
        if( $(this).val().length == maxlen ){ //當滿足maxlength時...
            inputs.eq( inputs.index($(this))+ 1 ).focus(); 
   //利用.index算出目前元素是在所有元素中的索引值，再將索引值+1，指向下一個input
        }
    }); 
});
        </script>
    </head>
    <body>
     
<form id="form1" name="form1" method="post" action="report_check.php">
  <table width="98%" border="1" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" width="100" height="25">Serial Code:</td>
      <td align="left"><input name="code[]" type="text" size="8" maxlength="4" />
        <input name="code[]" type="text" size="8" maxlength="4" />
        <input name="code[]" type="text" size="8" maxlength="4" />
        <input name="code[]" type="text" size="8" maxlength="4" />
        &nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;
        <input name="code[]" type="text" size="8" maxlength="4" />
        <input name="code[]" type="text" size="8" maxlength="4" />
        <input name="code[]" type="text" size="8" maxlength="4" />
        <input name="code[]" type="text" size="8" maxlength="4" /></td>
    </tr>
    <tr>
      <td align="center" width="100" height="25">Number1:</td>
      <td align="left"><input name="number1" type="text" maxlength="7" /></td>
    </tr>
    <tr>
      <td align="center" width="100" height="25">Number2:</td>
      <td align="left"><input name="number2" type="text" maxlength="10" /></td>
    </tr>
    <tr>
      <td colspan="2" align="center"><input name="bn_submit" type="submit"  value="Submit"/></td>
    </tr>
  </table>
</form></body>
</html>

2010年12月30日 星期四

Jquery實現按下Enter鍵時自動跳下一輸入欄位

2010年12月21日 星期二

實現兩個多重下拉選單中移動所選的項目

如何實現不按tab鍵自動跳到下一個input欄位

2010年12月30日星期四

2010年12月21日星期二