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