- Mobile web application contains order entry form.
- Rows contain product code and quantity.
- Mobile barcode scanner sends enter after barcode and this causes form to submit.
How to prevent form submit on enter: enter should behave like tab, it must:
- activate next input field.
- submit should done using submit button only.
jQuery, jQuery-mobile, ASP.NET MVC4 are used. Application is running in Motorola MC2180 puter using its WebKit based browser. This is modern browser and supports html5.
data entry page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="/Scripts/jquery-mobile/jquery.mobile-1.3.2.css" rel="stylesheet"/>
<script src="/Scripts/jquery/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-mobile/jquery.mobile-1.3.2.js"></script>
<script src="/Scripts/applibrary.js"></script>
</head>
<body>
<div>
<form id='inputform' method="post"
action ="/Detail/SaveFullDocument">
<input type="hidden" name="_rows" />
<table id="tableId">
<tr>
<th>Code</th>
<th>Quantity</th>
<td>
<input type="button" value="+" onclick="addRow('tableId')" /></td>
</tr>
<tr>
<td>
<input type="text" name="Product" /></td>
<td>
<input type="number" name="Quantity" /></td>
<td>
<input type="button" value="-" onclick="deleteRow(this)" /></td>
</tr>
<tr>
<td>
<input type="text" name="Product" /></td>
<td>
<input type="number" name="Quantity" /></td>
<td>
<input type="button" value="-" onclick="deleteRow(this)" /></td>
</tr>
....
</table>
<input type="button" value="+" onclick="addRow('tableId')" />
<input type="submit" value='Save' />
</form>
</div>
</body>
</html>
- Mobile web application contains order entry form.
- Rows contain product code and quantity.
- Mobile barcode scanner sends enter after barcode and this causes form to submit.
How to prevent form submit on enter: enter should behave like tab, it must:
- activate next input field.
- submit should done using submit button only.
jQuery, jQuery-mobile, ASP.NET MVC4 are used. Application is running in Motorola MC2180 puter using its WebKit based browser. This is modern browser and supports html5.
data entry page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="/Scripts/jquery-mobile/jquery.mobile-1.3.2.css" rel="stylesheet"/>
<script src="/Scripts/jquery/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-mobile/jquery.mobile-1.3.2.js"></script>
<script src="/Scripts/applibrary.js"></script>
</head>
<body>
<div>
<form id='inputform' method="post"
action ="/Detail/SaveFullDocument">
<input type="hidden" name="_rows" />
<table id="tableId">
<tr>
<th>Code</th>
<th>Quantity</th>
<td>
<input type="button" value="+" onclick="addRow('tableId')" /></td>
</tr>
<tr>
<td>
<input type="text" name="Product" /></td>
<td>
<input type="number" name="Quantity" /></td>
<td>
<input type="button" value="-" onclick="deleteRow(this)" /></td>
</tr>
<tr>
<td>
<input type="text" name="Product" /></td>
<td>
<input type="number" name="Quantity" /></td>
<td>
<input type="button" value="-" onclick="deleteRow(this)" /></td>
</tr>
....
</table>
<input type="button" value="+" onclick="addRow('tableId')" />
<input type="submit" value='Save' />
</form>
</div>
</body>
</html>
3 Answers
Reset to default 6$('#inputform').on('keydown', 'input', function (event) {
if (event.which == 13) {
console.log($(this));
$(this).next('input').focus();
event.preventDefault();
}
});
if all you need to focus next element upon enter, then no need to loop over all inputs as $(this) will be the target element.
DEMO
First, catch the enter, as the previous answer explained, then identify the next input field and call the .focus() method on it.
$(form).on('keyup', 'input',
function(event)
{
if(event.which() == 13)
{
event.preventDefault(); //this prevents the default, as was previouslynoted
$.each($('input'),
function(index, input)
{
if(input == this)
{
$('input')[index+1].focus();
}
});
}
});
You can prevent it with jQuery as follows:
$(document).on('keyup', 'input', function(event){
if(event.which()===13){ // 13 is the keyCode of enter Key
event.preventDefault();
}
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744736639a4590788.html
评论列表（0条）