Zeigt den vorherigen Wert in der Eingabe an, erlaubt aber die sofortige Eingabe eines neuen Werts oder die Annahme des vorherigen Werts

Question

Ich habe 3 Eingabefelder für die Eingabe von 10 Schlüsseln. Die Taste + wird verwendet, um zum nächsten Eingabefeld zu gelangen.

Wenn sich der Benutzer bei der letzten Eingabe befindet, werden die Daten an ein Array angehängt und der Prozess beginnt von vorn, wobei der Fokus in das erste Feld verschoben wird.

Der Benutzer möchte den vorherigen Wert als Standardwert haben, so dass, wenn der Eintrag nicht geändert werden muss, nur die Schaltfläche + gedrückt werden muss, um den Wert zu akzeptieren. Aber wenn es ändern muss, wollen sie einfach anfangen zu tippen.

... und ich muss IE unterstützen 11.

Was ich versucht habe:

• Nicht vorherigen value-- Blätter am Ende des Eingabefokus löschen, die stattdessen neue Eingabe anfügt Zuerst den Wert löschen.

• Kopieren des vorherigen Werts in Platzhalter - zeigt den Wert an und ermöglicht die sofortige Eingabe. Wenn + gedrückt wird, ohne einen Wert einzugeben, kopieren Sie den vorherigen Wert in das Feld. Das funktioniert; aber leider IE doesn't show placeholders wenn der Fokus auf dem Eingang ist.

/** 
 
* 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>

Dieser Code-Schnipsel funktioniert so, wie ich will; weiß jemand, wie man das mit IE 11 macht?

Answer 1

Einfache Lösung.

1. Den Wert #account unverändert lassen.

2. Wählen Sie es aus. Dadurch wird der gesamte Wert ausgewählt, als ob Sie in den Tabulator eingefügt würden, und Sie können den Wert sofort eingeben oder annehmen.

   $('.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. 
   
       } 
   
       }