在输入中显示以前的值，但允许立即输入新值或接受以前的值

Question

我有 3 个输入字段用于 10 键数据输入。 + 键用于跳转到下一个输入字段。

当用户在最后一个输入时，数据被附加到一个数组中，并且该过程重新开始，焦点被移到第一个字段。

用户希望将以前的值作为默认值，这样如果条目不需要更改，他们只需按+ 按钮接受该值。但如果它确实需要改变，他们只想开始打字。

...而且我必须支持 IE 11。

我尝试过的：

• 不清除先前的值 - 将焦点留在输入末尾，这会追加新输入而不是先清除值。

• 将先前的值复制到占位符中-- 显示该值并允许立即键入。如果在未输入值的情况下按下+，则将先前的值复制到字段中。这行得通；但不幸的是 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>

这个 sn-p 按我想要的方式工作；有谁知道如何使用 IE 11 进行这项工作？

Answer 1

简单的修复。

1. 保持#account 的值不变。

2. 选择它。这会选择整个值，就像您使用 Tab 键一样，并允许立即输入或接受该值。

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