前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用javascript将中文名字拆分为姓与名的jquery插件

用javascript将中文名字拆分为姓与名的jquery插件

作者头像
风柏杨4711
发布2021-03-15 10:47:38
7330
发布2021-03-15 10:47:38
举报
文章被收录于专栏:技术小牛
代码语言:javascript
复制
/* 
 * 把姓名分拆成姓与名的方法
 * @author waitatlee <waitatlee@163.com>
 * @date 2012/11/2
 */
(function($){
	var hyphenated = ['欧阳','太史','端木','上官','司马','东方','独孤','南宫','万俟','闻人','夏侯','诸葛','尉迟','公羊','赫连','澹台','皇甫',
		'宗政','濮阳','公冶','太叔','申屠','公孙','慕容','仲孙','钟离','长孙','宇文','城池','司徒','鲜于','司空','汝嫣','闾丘','子车','亓官',
		'司寇','巫马','公西','颛孙','壤驷','公良','漆雕','乐正','宰父','谷梁','拓跋','夹谷','轩辕','令狐','段干','百里','呼延','东郭','南门',
		'羊舌','微生','公户','公玉','公仪','梁丘','公仲','公上','公门','公山','公坚','左丘','公伯','西门','公祖','第五','公乘','贯丘','公皙',
		'南荣','东里','东宫','仲长','子书','子桑','即墨','达奚','褚师'];
	$.fn.splitName = function(userConfig){
		var self = this;
		var wraperLabel = self.closest('label');
		var form = self.closest('form');
		var config = $.extend({//将用户配置与默认配置合并
			'lastnameField': 'lastname',
			'firstnameField': 'firstname'
		}, userConfig);
		var lastnameField = config.lastnameField, firstnameField = config.firstnameField;
		if(form.find(':input[name="'+ lastnameField +'"]').size() > 0){
			jt.alert('警告:在初始化姓名拆分方法时发现表单中含有多于一个name的值为'+ lastnameField +'的元素,这可能会与姓名的拆分结果发生冲突而导致数据丢失,请检查');
		}
		if(form.find(':input[name="'+ firstnameField +'"]').size() > 0){
			jt.alert('警告:在初始化姓名拆分方法时发现表单中含有多于一个name的值为'+ firstnameField +'的元素,这可能会与姓名的拆分结果发生冲突而导致数据丢失,请检查');
		}
		self.init = function(){
			wraperLabel.attr('for', 'notExistsId');
			var replaceHtml = "<div class='nameInputWraper'><input type='text' placeholder='姓' class='partOne' name='"+ lastnameField +"'><input type='text' placeholder='名' class='partTwo' name='"+ firstnameField +"'></div>";
			self.replaceWith(replaceHtml);
			var partOne = form.find('input[name="'+ lastnameField +'"]');
			var partTwo = form.find('input[name="'+ firstnameField +'"]');
			partOne.bind('blur.split', function(){
				var partOneValue = $.trim(partOne.val());
				var vLength = partOneValue.length;
				if(vLength > 2){
					var preTwoWords = partOneValue.substr(0, 2);
					if($.inArray(preTwoWords, hyphenated) > -1){
						partOne.val(preTwoWords);
						partTwo.val(partOneValue.substr(2));
					}else{
						partOne.val(partOneValue.substr(0, 1));
						partTwo.val(partOneValue.substr(1));
					}
				}else if(vLength == 2 && !partTwo.val()){
					partOne.val(partOneValue.substr(0, 1));
					partTwo.val(partOneValue.substr(1));
				}
			});
		}
		self.init();
	};
})(jQuery);

先看看这个插件的效果,下面的效果是用CSS控制的,这里根据大家的喜好而定

输入内容前的效果:

输入内容后的效果:

使用的方法:

在表单中写一个文本框,然后在这个文本框的jquery对象上调用splitName方法初始化一下即可,示例:

html代码是这样写滴:

代码语言:javascript
复制
<input type="text" name="fullname">

然后用以下的JS语句初始化:

代码语言:javascript
复制
$('input[name="fullname"]').splitName();

这样当用户把整个姓名都输入在"姓"氏的文本框时,当blur事件发生后,脚本就会自动检查用户的输入并且检查有无复姓出现,智能将姓与名拆开到相应的文本框中,这样一来,用户可以即时检查拆分结果,当发现不对时,也可以马上进行修改了.

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2012/11/14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档