0
10 키 입력에 3 개의 입력 필드가 있습니다. + 키는 다음 입력 필드로 이동하는 데 사용됩니다.입력에 이전 값을 표시하지만 새 값을 즉시 입력하거나 이전 값을 허용합니다.
사용자가 마지막 입력을하면 데이터가 배열에 추가되고 포커스가 첫 번째 필드로 이동하면서 프로세스가 다시 시작됩니다.
사용자는 이전 값을 기본값으로 사용하고 싶기 때문에 항목을 변경하지 않아도된다면 + 버튼을 눌러 값을 받아 들여야합니다. 그러나 일 경우을 변경해야하며 타이핑을 시작하기를 원합니다.
... 그리고 나는 시도 무엇 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에서이 작업을 수행하는 방법을 알고 있습니까?