Encontré esta demostración en línea de una replicación de la función de agregar etiquetas en el desbordamiento de pila. Como puede ver con la demostración, el javascript permite , o enter para enviar una nueva etiqueta. Sin embargo, me gustaría deshabilitar ambas funciones.
https://jsfiddle.net/2gvdsvos/4/
Es bastante fácil deshabilitar el botón , pero tengo algunos problemas con el botón enter ya que no está en un formulario ni puede estar en un formulario. Quiero que todo el código permanezca igual, excepto el javascript. Espero que alguien pueda ayudarme.
$(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 ; /* trbl */ padding:5px; width:auto; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tag-container" 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" />Prueba esto
$(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 ; /* trbl */ padding:5px; width:auto; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tag-container" 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" />