jQuery TextExt Plugin: add tag after keypress “space” and click on some button
HTML
<script src="http://textextjs.com/textext/js/textext.core.js"></script>
<script src="http://textextjs.com/textext/js/textext.plugin.tags.js"></script>
<script src="http://textextjs.com/textext/js/textext.plugin.autocomplete.js"></script>
<script src="http://textextjs.com/textext/js/textext.plugin.suggestions.js"></script>
<script src="http://textextjs.com/textext/js/textext.plugin.filter.js"></script>
<script src="http://textextjs.com/textext/js/textext.plugin.focus.js"></script>
<script src="http://textextjs.com/textext/js/textext.plugin.prompt.js"></script>
<script src="http://textextjs.com/textext/js/textext.plugin.ajax.js"></script>
<script src="http://textextjs.com/textext/js/textext.plugin.arrow.js"></script>
<link rel="stylesheet" href="http://textextjs.com/textext/css/textext.core.css">
<link rel="stylesheet" href="http://textextjs.com/textext/css/textext.plugin.tags.css">
<link rel="stylesheet" href="http://textextjs.com/textext/css/textext.plugin.autocomplete.css">
<link rel="stylesheet" href="http://textextjs.com/textext/css/textext.plugin.focus.css">
<link rel="stylesheet" href="http://textextjs.com/textext/css/textext.plugin.prompt.css">
<link rel="stylesheet" href="http://textextjs.com/textext/css/textext.plugin.arrow.css">
<input type="text" style="width:200px" id="myInputTags" placeholder="add tag" />
<input type="button" id="btnId" value="Add Tag"/>
JavaScript
jQuery("#myInputTags")
.textext({
plugins: 'tags prompt',
prompt: 'add tag'
})
.keypress(function(event){
//'Space' key is pressed in keyboard
if(event.which==32){
addTag();
}
});
jQuery("#btnId").click(function(){
addTag();
})
function addTag(){
//Take the value from text input
var tag = $('#myInputTags').val();
//Clear the text input and add tag
$('#myInputTags').val('').textext()[0]
.tags().addTags([tag]);
}