javascript - How to make an INPUT TYPE="IMAGE" not submit on Enter in WebKit? -


in c#/asp.net application, have form renders following (plus lot more, matters):

<form method="post" action=""> <input type="image" name="ctl15" src="cancel.gif" style="border-width:0px;" />     <!-- server side, above input system.web.ui.webcontrols.imagebutton. --> ...more fluff... <input type="submit" name="button1" value="proceed" id="button1" class="button"     style="width:59px;" /> </form> 

this form works fine in internet explorer , firefox, fails in webkit-based browsers (safari , chrome). problem when user presses enter when in input field, rather using mouse click on submit button, image input activated (which in case corresponds cancel event, opposite of "proceed" action natural given ui in question).

what want to, on enter keypress, activate <input type="submit"> button instead of <input type="image">, without breaking submission clicking image. how can that? preferably in cross-browser manner don't need yet more special cases in code.

no jquery solutions, please, since application doesn't use (and introducing whole new library such "simple" thing going hard sell) - stock javascript fine, though. best if can done in html , css, have doubts feasibility of that.

in essence, question seems me sort of exact opposite of html: submitting form pressing enter without submit button.

unfortunately, since different parts of ui rendered different classes , kept in separate .aspx files (specifically, <input type="image"> in 1 place, , <input type="submit"> in quite another), reordering elements in generated html not feasible solution either.

pure javascript:

<script type="text/javascript"> var submit_button_id = "button1"; window.onload = function(event) {     var arrinputs = document.getelementsbytagname("input");     (var = 0; < arrinputs.length; i++) {         var ocurinput = arrinputs[i];         if (ocurinput.type == "text") {             ocurinput.onkeypress = function(evt) {                 if (typeof evt == "undefined" || evt == null)                     evt = window.event;                 var keycode = evt.keycode || evt.which;                 if (keycode == 13) {                     document.getelementbyid(submit_button_id).click();                     return false;                 }                 return true;             }         }     } } </script> 

tested on ie8 , chrome, better test on browsers think relevant before using it.

this code handle onkeypress events textboxes in document , when enter key pressed imitate click of submit button , cancel further handling of event avoid conflicts.


Comments

Popular posts from this blog

android - Spacing between the stars of a rating bar? -

aspxgridview - Devexpress grid - header filter does not work if column is initially hidden -

c# - How to execute a particular part of code asynchronously in a class -