Prevent enter from submitting from without it being in a form-CodePudding

I have found this demo online of a replication of the tag adding feature in stack overflow. As you can see with the demo, the javascript allows for , or enter to submit a new tag. However, I would like to disable both these features.

https://jsfiddle.net/2gvdsvos/4/

It is quite easy to disable the , button, but I am having some trouble with the enter button as it is not in a form, nor can it be in a form. I want all the code to stay the same, except for the javascript. Hope someone can help me.

$(document).ready(function(){
$(function(){ 

  $("#add-tag-input").on({
    focusout : function() {
      var txt = this.value.replace(/[^a-z0-9\ \-\.\#]/ig,''); // allowed characters
      if(txt) $("<span/>", {text:txt.toLowerCase(), appendTo:"#tag-container", class:"dashfolio-tag"});

      this.value = "";
    },
    keyup : function(ev) {
      // if: comma|enter (delimit more keyCodes with | pipe)
      if(/(188|13)/.test(ev.which)) $(this).focusout(); 
    }
  });
  $('.tag-container').on('click', 'span', function() {
    if(confirm("Remove "  $(this).text()  "?")) $(this).remove(); 
  });

});

});

.tag-container {
  max-width: 300px; /* helps wrap the tags in a specific width */
}

.dashfolio-tag {
  cursor:pointer;
  background-color: blue;
  padding: 5px 10px 5px 10px;
  display: inline-block;
  margin-top: 3px; /*incase tags go in next line, will space */
  color:#fff;
  margin-right: 4px;
  background:#789;
  padding-right: 20px; /* adds space inside the tags for the 'x' button */
}

.dashfolio-tag:hover{
  opacity:0.7;
}

.dashfolio-tag:after { 
 position:absolute;
 content:"×";
 padding:2px 2px;
 margin-left:2px;
 font-size:11px;
}

#add-tag-input {
  background:#eee;
  border:0;
  margin:6px 6px 6px 0px ; /* t r b l */
  padding:5px;
  width:auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  id="tag-container">
  <span class='dashfolio-tag'>tag1</span><span class='dashfolio-tag'>tag2</span><span class='dashfolio-tag'>tag3</span>
</div>      

<input type="text" value="" placeholder="Add a tag" id="add-tag-input" />

CodePudding user response：

Try this

$(function(){
    $("#add-tag-input").on({
        focusout : function() {
            var txt = this.value.replace(/[^a-z0-9\ \-\.\#]/ig,''); // allowed characters
            if(txt) $("<span/>", {text:txt.toLowerCase(), appendTo:"#tag-container", class:"dashfolio-tag"});

            this.value = "";
        }
    });
    $('.tag-container').on('click', 'span', function() {
        if(confirm("Remove "  $(this).text()  "?")) $(this).remove(); 
    });
});

.tag-container {
  max-width: 300px; /* helps wrap the tags in a specific width */
}

.dashfolio-tag {
  cursor:pointer;
  background-color: blue;
  padding: 5px 10px 5px 10px;
  display: inline-block;
  margin-top: 3px; /*incase tags go in next line, will space */
  color:#fff;
  margin-right: 4px;
  background:#789;
  padding-right: 20px; /* adds space inside the tags for the 'x' button */
}

.dashfolio-tag:hover{
  opacity:0.7;
}

.dashfolio-tag:after { 
 position:absolute;
 content:"×";
 padding:2px 2px;
 margin-left:2px;
 font-size:11px;
}

#add-tag-input {
  background:#eee;
  border:0;
  margin:6px 6px 6px 0px ; /* t r b l */
  padding:5px;
  width:auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  id="tag-container">
    <span class='dashfolio-tag'>tag1</span><span class='dashfolio-tag'>tag2</span><span class='dashfolio-tag'>tag3</span>
</div>
<input type="text" value="" placeholder="Add a tag" id="add-tag-input" />