2017-09-05 73 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. 
    
        } 
    
        } 
    
相关问题