Created
December 1, 2017 08:06
-
-
Save shiftenterdev/e63f160fa7fc3de5dbae9b814eb32f34 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/wofokuy
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| #tags{ | |
| float:left; | |
| border:1px solid #ccc; | |
| padding:5px; | |
| font-family:Arial; | |
| } | |
| #tags > span{ | |
| cursor:pointer; | |
| display:block; | |
| float:left; | |
| color:#fff; | |
| background:#789; | |
| padding:5px; | |
| padding-right:25px; | |
| margin:4px; | |
| border-radius:2px; | |
| } | |
| #tags > span:hover{ | |
| opacity:0.7; | |
| } | |
| #tags > span:after{ | |
| position:absolute; | |
| content:"×"; | |
| border:0px solid; | |
| padding:2px 5px; | |
| margin-left:3px; | |
| font-size:11px; | |
| border-radius:50%; | |
| } | |
| #tags > input{ | |
| background:#eee; | |
| border:0; | |
| margin:4px; | |
| padding:7px; | |
| width:auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="tags"> | |
| <span>php</span> | |
| <span>c++</span> | |
| <span>jquery</span> | |
| <input type="text" value="" class="form-control" placeholder="Add a tag" /> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| $(function(){ // DOM ready | |
| // ::: TAGS BOX | |
| $("#tags input").on({ | |
| focusout : function() { | |
| var txt = this.value.replace(/[^a-z0-9@\+\-\.\#]/ig,''); // allowed characters | |
| if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this}); | |
| this.value = ""; | |
| }, | |
| keyup : function(ev) { | |
| // if: comma|enter (delimit more keyCodes with | pipe) | |
| if(/(188|13)/.test(ev.which)) $(this).focusout(); | |
| } | |
| }); | |
| $('#tags').on('click', 'span', function() { | |
| if(confirm("Remove "+ $(this).text() +"?")) $(this).remove(); | |
| }); | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">#tags{ | |
| float:left; | |
| border:1px solid #ccc; | |
| padding:5px; | |
| font-family:Arial; | |
| } | |
| #tags > span{ | |
| cursor:pointer; | |
| display:block; | |
| float:left; | |
| color:#fff; | |
| background:#789; | |
| padding:5px; | |
| padding-right:25px; | |
| margin:4px; | |
| border-radius:2px; | |
| } | |
| #tags > span:hover{ | |
| opacity:0.7; | |
| } | |
| #tags > span:after{ | |
| position:absolute; | |
| content:"×"; | |
| border:0px solid; | |
| padding:2px 5px; | |
| margin-left:3px; | |
| font-size:11px; | |
| border-radius:50%; | |
| } | |
| #tags > input{ | |
| background:#eee; | |
| border:0; | |
| margin:4px; | |
| padding:7px; | |
| width:auto; | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">$(function(){ // DOM ready | |
| // ::: TAGS BOX | |
| $("#tags input").on({ | |
| focusout : function() { | |
| var txt = this.value.replace(/[^a-z0-9@\+\-\.\#]/ig,''); // allowed characters | |
| if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this}); | |
| this.value = ""; | |
| }, | |
| keyup : function(ev) { | |
| // if: comma|enter (delimit more keyCodes with | pipe) | |
| if(/(188|13)/.test(ev.which)) $(this).focusout(); | |
| } | |
| }); | |
| $('#tags').on('click', 'span', function() { | |
| if(confirm("Remove "+ $(this).text() +"?")) $(this).remove(); | |
| }); | |
| });</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #tags{ | |
| float:left; | |
| border:1px solid #ccc; | |
| padding:5px; | |
| font-family:Arial; | |
| } | |
| #tags > span{ | |
| cursor:pointer; | |
| display:block; | |
| float:left; | |
| color:#fff; | |
| background:#789; | |
| padding:5px; | |
| padding-right:25px; | |
| margin:4px; | |
| border-radius:2px; | |
| } | |
| #tags > span:hover{ | |
| opacity:0.7; | |
| } | |
| #tags > span:after{ | |
| position:absolute; | |
| content:"×"; | |
| border:0px solid; | |
| padding:2px 5px; | |
| margin-left:3px; | |
| font-size:11px; | |
| border-radius:50%; | |
| } | |
| #tags > input{ | |
| background:#eee; | |
| border:0; | |
| margin:4px; | |
| padding:7px; | |
| width:auto; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function(){ // DOM ready | |
| // ::: TAGS BOX | |
| $("#tags input").on({ | |
| focusout : function() { | |
| var txt = this.value.replace(/[^a-z0-9@\+\-\.\#]/ig,''); // allowed characters | |
| if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this}); | |
| this.value = ""; | |
| }, | |
| keyup : function(ev) { | |
| // if: comma|enter (delimit more keyCodes with | pipe) | |
| if(/(188|13)/.test(ev.which)) $(this).focusout(); | |
| } | |
| }); | |
| $('#tags').on('click', 'span', function() { | |
| if(confirm("Remove "+ $(this).text() +"?")) $(this).remove(); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment