改造jQuery-Tagit 插件支持中文全角的逗号和空格
jQuery 的 tagit 插件效果还是不错的,今天用到该插件但发现不能自定义标签分隔符,只能是英文半角逗号或空格,于是想改造下
效果:
先研究了一番插件的代码,发现并不能通过插件自身的扩展方法来实现,
标签输入框是插件自己生成的,所以本来想在外部绑定 keydown 事件但由于事件绑定先后顺序的问题不能实现,只能修改代码了:
改动不多,主要是增加了三个事件绑定在插件原来的 keydown 事件之前绑定一个自定义的 keydown 以及 blur 事件处理标签内容的过滤,以及 keyup 后模拟键盘的半角逗号按键回调触发原来的 keydown 事件,从而不会太多改动插件代码,不妨碍以后升级
这里还有一个问题,涉及到 keydown、keypress、keyup 顺序和效率的问题,简单说说:keydown是指键盘开始往下按下,此时 input 控件并没有得到最终的按键字符,只有一个响应事件 keyCode,而且此时如果是用的中文输入法则 keyCode 始终都是 229,也就不能通过该事件来判断全角中文的输入字符了,但这个效率应该是很高的,处理效果会很流畅,keypress 也是差不多的
代码:
/*
* jQuery UI Tag-it!
*
* @version v2.0 (06/2011)
*
* Copyright 2011, Levy Carneiro Jr.
* Released under the MIT license.
* http://aehlke.github.com/tag-it/LICENSE
*
* Homepage:
* http://aehlke.github.com/tag-it/
*
* Authors:
* Levy Carneiro Jr.
* Martin Rehfeld
* Tobias Schmidt
* Skylar Challand
* Alex Ehlke
*
* Maintainer:
* Alex Ehlke - Twitter: @aehlke
*
* Dependencies:
* jQuery v1.4+
* jQuery UI v1.8+
*/
(function($) { $.widget('ui.tagit', {
options: {
allowDuplicates : false,
caseSensitive : true,
fieldName : 'tags',
placeholderText : null, // Sets `placeholder` attr on input field.
readOnly : false, // Disables editing.
removeConfirmation: false, // Require confirmation to remove tags.
tagLimit : null, // Max number of tags allowed (null for unlimited). // Used for autocomplete, unless you override `autocomplete.source`.
availableTags : [], // Use to override or add any options to the autocomplete widget.
//
// By default, autocomplete.source will map to availableTags,
// unless overridden.
autocomplete: {}, // Shows autocomplete before the user even types anything.
showAutocompleteOnFocus: false, // When enabled, quotes are unneccesary for inputting multi-word tags.
allowSpaces: false, // The below options are for using a single field instead of several
// for our form values.
//
// When enabled, will use a single hidden field for the form,
// rather than one per tag. It will delimit tags in the field
// with singleFieldDelimiter.
//
// The easiest way to use singleField is to just instantiate tag-it
// on an INPUT element, in which case singleField is automatically
// set to true, and singleFieldNode is set to that element. This
// way, you don't need to fiddle with these options.
singleField: false, // This is just used when preloading data from the field, and for
// populating the field with delimited tags as the user adds them.
singleFieldDelimiter: ',', // Set this to an input DOM node to use an existing form field.
// Any text in it will be erased on init. But it will be
// populated with the text of tags as they are created,
// delimited by singleFieldDelimiter.
//
// If this is not set, we create an input node for it,
// with the name given in settings.fieldName.
singleFieldNode: null, // Whether to animate tag removals or not.
animate: true, // Optionally set a tabindex attribute on the input that gets
// created for tag-it.
tabIndex: null, // Event callbacks.
beforeTagAdded : null,
afterTagAdded : null, beforeTagRemoved : null,
afterTagRemoved : null, onTagClicked : null,
onTagLimitExceeded : null, // DEPRECATED:
//
// /!\ These event callbacks are deprecated and WILL BE REMOVED at some
// point in the future. They're here for backwards-compatibility.
// Use the above before/after event callbacks instead.
onTagAdded : null,
onTagRemoved: null,
// `autocomplete.source` is the replacement for tagSource.
tagSource: null
// Do not use the above deprecated options.
}, _create: function() {
// for handling static scoping inside callbacks
var that = this; // There are 2 kinds of DOM nodes this widget can be instantiated on:
// 1. UL, OL, or some element containing either of these.
// 2. INPUT, in which case 'singleField' is overridden to true,
// a UL is created and the INPUT is hidden.
if (this.element.is('input')) {
this.tagList = $('<ul></ul>').insertAfter(this.element);
this.options.singleField = true;
this.options.singleFieldNode = this.element;
this.element.addClass('tagit-hidden-field');
} else {
this.tagList = this.element.find('ul, ol').andSelf().last();
} this.tagInput = $('<input type="text" />').addClass('ui-widget-content'); if (this.options.readOnly) this.tagInput.attr('disabled', 'disabled'); if (this.options.tabIndex) {
this.tagInput.attr('tabindex', this.options.tabIndex);
} if (this.options.placeholderText) {
this.tagInput.attr('placeholder', this.options.placeholderText);
} if (!this.options.autocomplete.source) {
this.options.autocomplete.source = function(search, showChoices) {
var filter = search.term.toLowerCase();
var choices = $.grep(this.options.availableTags, function(element) {
// Only match autocomplete options that begin with the search term.
// (Case insensitive.)
return (element.toLowerCase().indexOf(filter) === 0);
});
if (!this.options.allowDuplicates) {
choices = this._subtractArray(choices, this.assignedTags());
}
showChoices(choices);
};
} if (this.options.showAutocompleteOnFocus) {
this.tagInput.focus(function(event, ui) {
that._showAutocomplete();
}); if (typeof this.options.autocomplete.minLength === 'undefined') {
this.options.autocomplete.minLength = 0;
}
} // Bind autocomplete.source callback functions to this context.
if ($.isFunction(this.options.autocomplete.source)) {
this.options.autocomplete.source = $.proxy(this.options.autocomplete.source, this);
} // DEPRECATED.
if ($.isFunction(this.options.tagSource)) {
this.options.tagSource = $.proxy(this.options.tagSource, this);
} this.tagList
.addClass('tagit')
.addClass('ui-widget ui-widget-content ui-corner-all')
// Create the input field.
.append($('<li class="tagit-new"></li>').append(this.tagInput))
.click(function(e) {
var target = $(e.target);
if (target.hasClass('tagit-label')) {
var tag = target.closest('.tagit-choice');
if (!tag.hasClass('removed')) {
that._trigger('onTagClicked', e, {tag: tag, tagLabel: that.tagLabel(tag)});
}
} else {
// Sets the focus() to the input field, if the user
// clicks anywhere inside the UL. This is needed
// because the input field needs to be of a small size.
that.tagInput.focus();
}
}); // Single field support.
var addedExistingFromSingleFieldNode = false;
if (this.options.singleField) {
if (this.options.singleFieldNode) {
// Add existing tags from the input field.
var node = $(this.options.singleFieldNode);
var tags = node.val().split(this.options.singleFieldDelimiter);
node.val('');
$.each(tags, function(index, tag) {
that.createTag(tag, null, true);
addedExistingFromSingleFieldNode = true;
});
} else {
// Create our single field input after our list.
this.options.singleFieldNode = $('<input type="hidden" style="display:none;" value="" name="' + this.options.fieldName + '" />');
this.tagList.after(this.options.singleFieldNode);
}
} // Add existing tags from the list, if any.
if (!addedExistingFromSingleFieldNode) {
this.tagList.children('li').each(function() {
if (!$(this).hasClass('tagit-new')) {
that.createTag($(this).text(), $(this).attr('class'), true);
$(this).remove();
}
});
} // 增加键盘输入事件,支持全角下的(,)逗号和( )空格
// 注意顺序必须在插件绑定前绑定自定义事件
this.tagInput.on('keydown blur', function(){
var val = that.tagInput.val();
val = val.replace(/(,| )+/g, '');
that.tagInput.val(val);
}).keyup(function() {
var val = $.trim(that.tagInput.val());
var lastChar = val ? val.substr(-1, 1) : '';
if (lastChar == ',' || lastChar == ' ') {
that.tagInput.trigger('keydown', { keyCode:$.ui.keyCode.COMMA });
}
}); // Events.
this.tagInput
.keydown(function(event, opt) {
// 增加外部模拟逗号键盘输入事件
if (typeof opt == 'object' && typeof opt.keyCode == 'number') {
event.which = opt.keyCode;
event.shiftKey = false;
} // Backspace is not detected within a keypress, so it must use keydown.
if (event.which == $.ui.keyCode.BACKSPACE && that.tagInput.val() === '') {
var tag = that._lastTag();
if (!that.options.removeConfirmation || tag.hasClass('remove')) {
// When backspace is pressed, the last tag is deleted.
that.removeTag(tag);
} else if (that.options.removeConfirmation) {
tag.addClass('remove ui-state-highlight');
}
} else if (that.options.removeConfirmation) {
that._lastTag().removeClass('remove ui-state-highlight');
}
// Comma/Space/Enter are all valid delimiters for new tags,
// except when there is an open quote or if setting allowSpaces = true.
// Tab will also create a tag, unless the tag input is empty,
// in which case it isn't caught.
if (
(event.which === $.ui.keyCode.COMMA && event.shiftKey === false) ||
event.which === $.ui.keyCode.ENTER ||
(
event.which == $.ui.keyCode.TAB &&
that.tagInput.val() !== ''
) ||
(
event.which == $.ui.keyCode.SPACE &&
that.options.allowSpaces !== true &&
(
$.trim(that.tagInput.val()).replace( /^s*/, '' ).charAt(0) != '"' ||
(
$.trim(that.tagInput.val()).charAt(0) == '"' &&
$.trim(that.tagInput.val()).charAt($.trim(that.tagInput.val()).length - 1) == '"' &&
$.trim(that.tagInput.val()).length - 1 !== 0
)
)
)
) {
// Enter submits the form if there's no text in the input.
if (!(event.which === $.ui.keyCode.ENTER && that.tagInput.val() === '')) {
event.preventDefault();
}
// Autocomplete will create its own tag from a selection and close automatically.
if (!(that.options.autocomplete.autoFocus && that.tagInput.data('autocomplete-open'))) {
that.tagInput.autocomplete('close');
that.createTag(that._cleanedInput());
}
}
}).blur(function(e){
// Create a tag when the element loses focus.
// If autocomplete is enabled and suggestion was clicked, don't add it.
if (!that.tagInput.data('autocomplete-open')) {
that.createTag(that._cleanedInput());
}
}); // Autocomplete.
if (this.options.availableTags || this.options.tagSource || this.options.autocomplete.source) {
var autocompleteOptions = {
select: function(event, ui) {
that.createTag(ui.item.value);
// Preventing the tag input to be updated with the chosen value.
return false;
}
};
$.extend(autocompleteOptions, this.options.autocomplete); // tagSource is deprecated, but takes precedence here since autocomplete.source is set by default,
// while tagSource is left null by default.
autocompleteOptions.source = this.options.tagSource || autocompleteOptions.source; this.tagInput.autocomplete(autocompleteOptions).bind('autocompleteopen.tagit', function(event, ui) {
that.tagInput.data('autocomplete-open', true);
}).bind('autocompleteclose.tagit', function(event, ui) {
that.tagInput.data('autocomplete-open', false);
}); this.tagInput.autocomplete('widget').addClass('tagit-autocomplete');
}
}, destroy: function() {
$.Widget.prototype.destroy.call(this); this.element.unbind('.tagit');
this.tagList.unbind('.tagit'); this.tagInput.removeData('autocomplete-open'); this.tagList.removeClass([
'tagit',
'ui-widget',
'ui-widget-content',
'ui-corner-all',
'tagit-hidden-field'
].join(' ')); if (this.element.is('input')) {
this.element.removeClass('tagit-hidden-field');
this.tagList.remove();
} else {
this.element.children('li').each(function() {
if ($(this).hasClass('tagit-new')) {
$(this).remove();
} else {
$(this).removeClass([
'tagit-choice',
'ui-widget-content',
'ui-state-default',
'ui-state-highlight',
'ui-corner-all',
'remove',
'tagit-choice-editable',
'tagit-choice-read-only'
].join(' ')); $(this).text($(this).children('.tagit-label').text());
}
}); if (this.singleFieldNode) {
this.singleFieldNode.remove();
}
} return this;
}, _cleanedInput: function() {
// Returns the contents of the tag input, cleaned and ready to be passed to createTag
return $.trim(this.tagInput.val().replace(/^"(.*)"$/, '$1'));
}, _lastTag: function() {
return this.tagList.find('.tagit-choice:last:not(.removed)');
}, _tags: function() {
return this.tagList.find('.tagit-choice:not(.removed)');
}, assignedTags: function() {
// Returns an array of tag string values
var that = this;
var tags = [];
if (this.options.singleField) {
tags = $(this.options.singleFieldNode).val().split(this.options.singleFieldDelimiter);
if (tags[0] === '') {
tags = [];
}
} else {
this._tags().each(function() {
tags.push(that.tagLabel(this));
});
}
return tags;
}, _updateSingleTagsField: function(tags) {
// Takes a list of tag string values, updates this.options.singleFieldNode.val to the tags delimited by this.options.singleFieldDelimiter
$(this.options.singleFieldNode).val(tags.join(this.options.singleFieldDelimiter)).trigger('change');
}, _subtractArray: function(a1, a2) {
var result = [];
for (var i = 0; i < a1.length; i++) {
if ($.inArray(a1[i], a2) == -1) {
result.push(a1[i]);
}
}
return result;
}, tagLabel: function(tag) {
// Returns the tag's string label.
if (this.options.singleField) {
return $(tag).find('.tagit-label:first').text();
} else {
return $(tag).find('input:first').val();
}
}, _showAutocomplete: function() {
this.tagInput.autocomplete('search', '');
}, _findTagByLabel: function(name) {
var that = this;
var tag = null;
this._tags().each(function(i) {
if (that._formatStr(name) == that._formatStr(that.tagLabel(this))) {
tag = $(this);
return false;
}
});
return tag;
}, _isNew: function(name) {
return !this._findTagByLabel(name);
}, _formatStr: function(str) {
if (this.options.caseSensitive) {
return str;
}
return $.trim(str.toLowerCase());
}, _effectExists: function(name) {
return Boolean($.effects && ($.effects[name] || ($.effects.effect && $.effects.effect[name])));
}, createTag: function(value, additionalClass, duringInitialization) {
var that = this; value = $.trim(value); if(this.options.preprocessTag) {
value = this.options.preprocessTag(value);
} if (value === '') {
return false;
} if (!this.options.allowDuplicates && !this._isNew(value)) {
var existingTag = this._findTagByLabel(value);
if (this._trigger('onTagExists', null, {
existingTag: existingTag,
duringInitialization: duringInitialization
}) !== false) {
if (this._effectExists('highlight')) {
existingTag.effect('highlight');
}
}
return false;
} if (this.options.tagLimit && this._tags().length >= this.options.tagLimit) {
this._trigger('onTagLimitExceeded', null, {duringInitialization: duringInitialization});
return false;
} var label = $(this.options.onTagClicked ? '<a class="tagit-label"></a>' : '<span class="tagit-label"></span>').text(value); // Create tag.
var tag = $('<li></li>')
.addClass('tagit-choice ui-widget-content ui-state-default ui-corner-all')
.addClass(additionalClass)
.append(label); if (this.options.readOnly){
tag.addClass('tagit-choice-read-only');
} else {
tag.addClass('tagit-choice-editable');
// Button for removing the tag.
var removeTagIcon = $('<span></span>')
.addClass('ui-icon ui-icon-close');
var removeTag = $('<a><span class="text-icon">\xd7</span></a>') // \xd7 is an X
.addClass('tagit-close')
.append(removeTagIcon)
.click(function(e) {
// Removes a tag when the little 'x' is clicked.
that.removeTag(tag);
});
tag.append(removeTag);
} // Unless options.singleField is set, each tag has a hidden input field inline.
if (!this.options.singleField) {
var escapedValue = label.html();
tag.append('<input type="hidden" value="' + escapedValue + '" name="' + this.options.fieldName + '" class="tagit-hidden-field" />');
} if (this._trigger('beforeTagAdded', null, {
tag: tag,
tagLabel: this.tagLabel(tag),
duringInitialization: duringInitialization
}) === false) {
return;
} if (this.options.singleField) {
var tags = this.assignedTags();
tags.push(value);
this._updateSingleTagsField(tags);
} // DEPRECATED.
this._trigger('onTagAdded', null, tag); this.tagInput.val(''); // Insert tag.
this.tagInput.parent().before(tag); this._trigger('afterTagAdded', null, {
tag: tag,
tagLabel: this.tagLabel(tag),
duringInitialization: duringInitialization
}); if (this.options.showAutocompleteOnFocus && !duringInitialization) {
setTimeout(function () { that._showAutocomplete(); }, 0);
}
}, removeTag: function(tag, animate) {
animate = typeof animate === 'undefined' ? this.options.animate : animate; tag = $(tag); // DEPRECATED.
this._trigger('onTagRemoved', null, tag); if (this._trigger('beforeTagRemoved', null, {tag: tag, tagLabel: this.tagLabel(tag)}) === false) {
return;
} if (this.options.singleField) {
var tags = this.assignedTags();
var removedTagLabel = this.tagLabel(tag);
tags = $.grep(tags, function(el){
return el != removedTagLabel;
});
this._updateSingleTagsField(tags);
} if (animate) {
tag.addClass('removed'); // Excludes this tag from _tags.
var hide_args = this._effectExists('blind') ? ['blind', {direction: 'horizontal'}, 'fast'] : ['fast']; var thisTag = this;
hide_args.push(function() {
tag.remove();
thisTag._trigger('afterTagRemoved', null, {tag: tag, tagLabel: thisTag.tagLabel(tag)});
}); tag.fadeOut('fast').hide.apply(tag, hide_args).dequeue();
} else {
tag.remove();
this._trigger('afterTagRemoved', null, {tag: tag, tagLabel: this.tagLabel(tag)});
} }, removeTagByLabel: function(tagLabel, animate) {
var toRemove = this._findTagByLabel(tagLabel);
if (!toRemove) {
throw "No such tag exists with the name '" + tagLabel + "'";
}
this.removeTag(toRemove, animate);
}, removeAll: function() {
// Removes all tags.
var that = this;
this._tags().each(function(index, tag) {
that.removeTag(tag, false);
});
} });
})(jQuery);
使用方法很简单的就不多说了,下面是相关网址介绍:
https://github.com/aehlke/tag-it
需要配置 jQuery-ui 一起使用的:
效果:
改造jQuery-Tagit 插件支持中文全角的逗号和空格的更多相关文章
- $.ajax里一个中文全角逗号引发的惨案
昨天,在制作一个页面时,突然发生一件不可思议的事情--JS失效了! 确实让人匪夷所思,我记得饭前还是正常运作的. 于是慢慢的缩小范围,把下午刚加的语句删掉,删完了页面就正常了. 于是被删除的这部分代码 ...
- php中利用正则去掉中文全角空格
一开始用$temp = trim($temp, " "); 这种方法,导致trim后的中文字符有乱码 最后 $str = " 广东君孺律师事务所 "; $str ...
- 刨根究底字符编码之五——简体汉字编码方案(GB2312、GBK、GB18030、GB13000)以及全角、半角、CJK
简体汉字编码方案(GB2312.GBK.GB18030.GB13000)以及全角.半角.CJK 一.概述 1. 英文字母再加一些其他标点字符之类的也不会超过256个,用一个字节来表示一个字符就足够 ...
- 我的Android进阶之旅------>Java全角半角的转换方法
一中文全角和半角输入的区别 1全角指一个字符占用两个标准字符位置 2半角指一字符占用一个标准的字符位置 3全角与半角各在什么情况下使用 4全角和半角的区别 5关于全角和半角 6全角与半角比较 二转半角 ...
- 关于JAVA正则匹配空白字符的问题(全角空格与半角空格)
今天遇到一个字符串,怎么匹配空格都不成功!!! 我把空格复制到test.properties文件 显示“\u3000” ,这是什么? 这是全角空格!!! 查了一下 \s 不支持全角 1.& ...
- python实现全角半角的相互转换
缘起 在自然语言处理过程中,全角.半角的的不一致会导致信息抽取不一致,因此需要统一. 转换说明 全角半角转换说明 有规律(不含空格): 全角字符unicode编码从65281~65374 (十六进制 ...
- 有用的jQuery布局插件推荐
网页设计中排版也是很重要的,但有些比较难的网页排版我们可以用一些jQuery来实现,今天文章中主要分享一些有用的jQuery布局插件,有类似Pinterest流布局插件.友荐的滑动提示块以及其它jQu ...
- java去左右的空格(包括全角空格,tab,回车等)
在开发中我们会遇到需要去除左右空格的需求,如果只是简单的空格,调一下trim()方法即可,但如果有中文全角.回车等看起来是空格的非空格,则需要自定义来开发实现,下面这个工具可以实现去左右那些看起来是空 ...
- python实现字符串中的半全角转换
全角和半角的空格的Unicode值相差12256 除空格外的全角和半角的Unicode值相差65248 # -*- coding: utf-8 -*- def strQ2B(ustring): &qu ...
随机推荐
- [转]使用ReactiveCocoa实现iOS平台响应式编程
原文:http://www.itiger.me/?p=38 使用ReactiveCocoa实现iOS平台响应式编程 ReactiveCocoa和响应式编程 在说ReactiveCocoa之前,先要介绍 ...
- ios学习笔记之UIControl解读
UIControl,相信大家对其并不陌生吧,比如平常最常用的UIButton就是继承自UIControl的.按照惯例,还是先来看看为什么有UIControl这个类?什么时候用到它? 查下文档就可以看到 ...
- ul和li实现分两列(多列)布局显示
简单语句实现DIV+CSS分两列(多列)布局显示 <style type="text/css"> .my ul { width: 210px; } .my li { w ...
- ASP.NET Web API下的HttpController激活:程序集的解析
ASP.NET Web API下的HttpController激活:程序集的解析 HttpController的激活是由处于消息处理管道尾端的HttpRoutingDispatcher来完成的,具体来 ...
- kinect (oldest one) (libfreenect with py_kinect) on linux ubuntu14.04 x64
freenect libs Where is the resource? Here :P : https://github.com/OpenKinect/libfreenect To make sur ...
- service structure flowchart [mobile to server via HTTP RESTful API and TCP/IP in a map]
mobile to server in RESTful and TCP/IP way
- C语言面试题汇总
1. 阅读下面程序并写出输出结果(10分). main() { int a[5]={1,2,3,4,5}; int *ptr=(int *)(&a+1); printf("%d, ...
- Android 检测是否连接蓝牙耳机
前言 欢迎大家我分享和推荐好用的代码段~~ 声明 欢迎转载,但请保留文章原始出处: CSDN:http://www.csdn.net ...
- .Net程序员学用Oracle系列(8):触发器、任务、序列、连接
<.Net程序员学用Oracle系列:导航目录> 本文大纲 1.触发器 1.1.创建触发器 1.2.禁用触发器 & 启用触发器 & 删除触发器 2.任务 2.1.DBMS_ ...
- SharePoint Framework (SPFx)安装配置以及开发-基础篇
前言 SharePoint Framework(SPFx),是页面 和Webpart的模型,完全支持本地开发(即完全可以脱离SharPoint环境在本地进行开发),SPFx包含了一系列的client- ...