In the example below, each textbox has its own default button. While focus is in a text box, pressing [Enter] key will cause the associated button to click so that you do not need to click the associated button separately.
<!doctype html>
<html>
<head><title>Set Enter Key as default Click</title>
<style type="text/css">
body { font-family: Verdana, Tahoma; line-height: 1.7em; font-size: 0.85em; }
</style>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<h1>Enter Key Capture</h1>
<div>
<input type="text" id="txt1" />
<input type="button" id="btn1" class="defaultButton" value="Button1" />
</div>
<div>
<input type="text" id="txt2" />
<input type="button" id="btn2" class="defaultButton" value="Button2" />
</div>
</body>
<script type="text/javascript">
$( document ).ready( function() {
$( 'input[type=text]' ).bind({
keypress: function( event ){
if( checkIfEnterKeyPressed() ){
var message = "Enter key has been pressed while in " +
$(this).attr("id") + ".";
$(this).siblings(".defaultButton").bind(
"click",
{ msg: message },
function( event ){
alert( event.data.msg + "\n" + $(this).val() + " clicked." );
}
).click();
}
}
});
var checkIfEnterKeyPressed = function(){
var keycode = ( event.keyCode ? event.keyCode : event.which );
return ( keycode == '13' ? true : false );
};
});
</script>
</html>
No comments:
Post a Comment