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>

这个片段以我想要的方式工作;有没有人知道如何使用IE 11工作？

Answer 1

简单修复。

保持#account的值不变。

选择它。这将选择整个值，就像您选中它一样，并允许立即键入或接受该值。

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

    }

  }

显示输入中的上一个值，但允许立即键入新值或接受上一个值

1 个答案: