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的工作?