2017-09-05 74 views
0

我有3個輸入字段用於10鍵數據輸入。 +鍵用於選擇下一個輸入字段。在輸入中顯示以前的值,但允許立即鍵入新值或接受以前的值

當用戶在最後一個輸入時,數據被附加到一個數組,並且該過程重新開始,焦點被移動到第一個字段。

用戶希望將以前的值作爲默認值,這樣如果條目不需要更改,他們所要做的就是按+按鈕接受該值。但如果確實需要更改,他們只想開始輸入。

...我要支持IE 11

我曾嘗試:

  • 不清除以前value--葉集中在輸入端,追加新的輸入,而不是結束清理價值第一。

  • 將以前的值複製到佔位符 - 顯示值並允許立即鍵入。如果在不輸入值的情況下按下+,則將以前的值複製到字段中。這有效;但不幸的是IE doesn't show placeholders如果焦點在輸入。

/** 
 
* Declare 'Global' variables 
 
* 
 
* transactions array is an array of transaction objects. It is the 
 
* storage container of transactions before submission to database 
 
* 
 
* typeSummary{} is an associative array that aggregates totals based on type, ie, 
 
* typeSummary.type = running total for that type 
 
* 
 
* transactionIndex gives an index for identifying the row number of a transaction. 
 
*/ 
 
    var transactions = []; 
 
    var transactionIndex = 0; 
 

 
    // ...snip... 
 

 
/** 
 
* 
 
* EVENT LISTENERS 
 
* 
 
*  Keypresses on Inputs: advance to next input and store data structure before starting back at beginning 
 
*  Transaction Delete: 
 
*/ 
 
$(document).ready(function(){ 
 

 
    /** 
 
    * Listener for data entry fields [account | type | amount] 
 
    * 
 
    * Uses the '+' key (43) to advance to the next field. 
 
    * Values are stored in global array 'transactions' upon 
 
    * advancing cursor back to position 1 (account) 
 
    * 
 
    * tried various JS ways to advance cursor, such as 
 
    * var inputs = $(this).closest('.form-group').find(':input'); 
 
    * inputs.eq(inputs.index(this)+ 1).focus(); 
 
    * or 
 
    * $(this).nextAll().find('.inputs:first').focus(); 
 
    * but most reliable way is to procedurally advance to the next one I designate by means of id. 
 
    */ 
 
    $('.inputs').keypress(function (e) { 
 

 
    // advance on '+' key 
 
    if(e.which==43) { 
 

 
     // prevent entry from being entered into input 
 
     e.preventDefault(); 
 

 
     if(this.id=='account') { 
 

 
     fillDefaultAccountNumber(); 
 

 
     console.log('advancing focus from account to type'); 
 
     $('#type').focus(); 
 
     } 
 

 
     if(this.id=='type') { 
 
     
 
     console.log('advancing focus from type to amount'); 
 
     $('#amount').focus(); 
 
     } 
 

 
     if(this.id=='amount') { 
 

 
     //addRecord(); 
 
     
 
     clearInputs(); 
 
     transactionIndex++; 
 

 
     console.log('advancing focus from amount back to account'); 
 
     $('#account').focus(); 
 

 
     } 
 

 
    } 
 

 

 
    }); 
 

 
}); 
 

 

 
function clearInputs() { 
 
     
 
    var val = $('#account').val(); 
 
    $('#account').attr("placeholder", val); 
 
    
 
    $('#account').val(''); 
 
    $('#type').val(''); 
 
    $('#amount').val(''); 
 
} 
 

 
/** 
 
* 
 
* if there was a placeholder and no value was entered, 
 
* use placeholder value to fill in value. 
 
* 
 
*/ 
 
function fillDefaultAccountNumber() { 
 
     
 
    if($('#account').val()=='') { 
 
    
 
    $('#account').val($('#account').attr('placeholder')); 
 
    
 
    console.log('No value entered; using placeholder.'); 
 
    console.log('Account value is now ' + $('#account').val()); 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>Press 'plus' key to advance to next field</h3> 
 
<div class= "panel panel-default"> 
 
     <fieldset class="form-group"> 
 
      <legend panel-heading>Transaction Entry</legend> 
 
      <form class="form-horizontal panel-body"> 
 
      <div class="form-group"> 
 
       <label for="account" class="col-sm-5">Account (9 digits)</label> 
 
       <div class="col-sm-7"><input id="account" class="inputs" type="text" autofocus maxlength="9" size="9" /></div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label for="type" class="col-sm-5">Type (1 digit)</label> 
 
       <div class="col-sm-7"><input id="type" class="inputs" type="text" maxlength="1" size="1" /></div> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label for="amount" class="col-sm-5">Amount</label> 
 
       <div class="col-sm-7"><input id="amount" class="inputs lastInSeries" type="text" /></div> 
 
      </div> 
 
      </form> 
 
     </fieldset> 
 
     </div> 
 
<h3>Press 'plus' key to start next record</h3>

這個片段的工作我想要的方式;有誰知道如何使這與IE 11的工作?

回答

0

簡單修復。

  1. 保留#account的值不變。
  2. 選擇它。這將選擇整個值,就像您選中它一樣,並允許立即鍵入或接受該值。

    $('.inputs').keypress(function (e) { 
    
        // advance on '+' key 
        if(e.which==43) { 
    
        // prevent entry from being entered into input 
        e.preventDefault(); 
    
        if(this.id=='account') { 
    
         //fillDefaultAccountNumber(); 
    
         console.log('advancing focus from account to type'); 
         $('#type').focus(); 
        } 
    
        if(this.id=='type') { 
    
         console.log('advancing focus from type to amount'); 
         $('#amount').focus(); 
        } 
    
        if(this.id=='amount') { 
    
         addRecord(); 
    
         console.log('advancing focus from amount back to account'); 
         $('#account').focus(); 
         $('#account').select(); // allows default value to be accepted or start typing new value. 
    
        } 
    
        } 
    
相關問題