简体   繁体   中英

addNewRow with Enter Key via javascript

I have the following code :

$(document).on('keypress', ".addNewRow", function(e){
    var keyCode = e.which ? e.which : e.keyCode;
    if(keyCode == 9 ) addNewRow();
});

Upon pressing "Tab" this code executes addNewRow (which adds table data). This works perfect. I want to alter this to make it work with "Enter", so I modified as follows :

$(document).on('keypress', ".addNewRow", function(e){
    var keyCode = e.which ? e.which : e.keyCode;
    if(keyCode == 9,13 ) addNewRow();
});

For some odd reason, this does not work as expected. Is there a different way of doing this that I am missing? *Banging head on wall

Edit : Also have tried this :

$(document).on('keypress', ".addNewRow", function(e){
    var keyCode = e.which ? e.which : e.keyCode;
    if(keyCode == 9||13 ) addNewRow();
});

Form Code(To prevent submit on enter) :

<script type="text/javascript">
function tabE(obj, e) {
  var e = (typeof event != 'undefined') ? window.event : e; // IE : Moz

  var self = $(obj),
    form = self.parents('form:eq(0)'),
    focusable, next;

  if (e.keyCode == 13) {
    focusable = form.find('input,a,select,button,textarea').filter(':visible');
    next = focusable.eq(focusable.index(obj) + 1);
    if (!next.length) {
      next = focusable.first();
    }
    next.focus();
    return false;
  }
}
</script>
<!-- Prevent Enter from Submitting Form -->
<script>
                    $(document).on("keydown", "input", function(e) {
                    if (e.which==13) e.preventDefault();
                    });
                    </script>
    <!-- Begin page content -->

正确or声明:

if (keyCode == 9 || keyCode  == 13)

https://jsfiddle.net/8bzn43r6/ Please see the example in the link

<table>
<tbody>
  <tr>
    <td><input type = "text" id="username"/></td>
  </tr>
</tbody>
</table>

$(document).ready(function(){
    var count = 0;

  function addNewRow(){
    console.log("Added ROW" + count++);
    $("<tr><td><input type='text' id='username'/><td/><tr/>").appendTo("tbody");
  }

    $('tbody').on('keydown','#username',function(e){
     if(e.keyCode == 9 || e.keyCode == 13) addNewRow();
  });

});

Working like a charm

do you want your if as an OR?

if(keyCode == 9 || keyCode == 13 )

or as an AND?

if(keyCode == 9 && keyCode == 13 )

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM