0
$('.btn-tag').click(function(e) {
e.preventDefault();
addTag();
});
$('#tags').bind({
keyup: function(e) {
var code = e.keyCode || e.which;
if (code == 32) { //Enter keycode
addTag();
}
},
keypress: function(e) {
if (e.which === 32)
return false;
},
});
$('#tags').bind('copy paste', function(e) {
e.preventDefault();
});
$('.tags-box').on('click', '.tag-delete', function(e) {
e.preventDefault();
$(this).parent().remove();
limitofTags();
compileTags();
});
limitofTags();
function addTag() {
var tag = $.trim($('#tags').val());
if (tag !== '') {
var $tagItem = $('<div class="tag"><a href="" class="tag-delete"><i class="icn-delete"></i></a>' + tag + '</div>');
$tagItem.appendTo('.tags-box');
$('#tags').val('');
limitofTags();
compileTags();
}
}
function compileTags() {
var tags = $('.tags-box').find('.tag').map(function() {
var text = $.trim($(this).text());
if (!text) {
return text;
}
}).get().join(",");
$('#tagsAdd').val(tags);
}
//Limiting number of Tags
function limitofTags() {
var tags = $('.tags-box').find('.tag').map(function() {
var text = $.trim($(this).text());
if (!text) {
return text;
}
}).get();
$("#tags").prop('disabled', tags.length >= 12);
var limit = 12;
var $counter = $('.numoftags');
var remains = parseInt(limit - tags.length);
if (remains == 1) {
$counter.text(remains + ' more tags');
} else if (tags.length >= limit) {
$counter.text('Cannot display anymore tags');
} else {
$counter.text('Add ' + remains + ' more tags');
}
}
HTML防止有空標籤出現無字
<div class="fieldcontain ">
<h3> Tags </h3>
<input type="text" name="tags" id="tags">
<input type="hidden" name="tagsAdd" value="" id="tagsAdd">
<a href="" class="btn-tag">Add</a>
<div class="tag-count">
<small>
<div class="numoftags">Add 12 more tags</div>
</small>
</div>
<div class="tags-box">
</div>
</div>
奇怪,返回false不會停止標籤盒容器中顯示哪些不應該被允許空白標籤。我希望它檢查標籤盒容器中的所有標籤在顯示標籤之前是否有單詞。如何防止在我保存草稿或發佈後沒有詞語出現的標記?
幫助感謝!
console.log文本當標籤爲空時顯示什麼? –
嘗試添加'text!=''|| text!= null' –
@PatsyIssa - 我把console.log,但它不會打印任何內容,但val(標籤)在保存標籤 – kittymeows