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