data.chinahighlights.com/js/train/biginput.js

// 录入人名放大效果 2017-11-9 zp
$(function () {
	new TextMagnifier({
		inputElem: "input[name='guestpassport']",
		parentCls: ".psin-input",
		align: 'top'
	});

});

function TextMagnifier(options) {

	this.config = {

		inputElem: '.inputElem', // 输入框目标元素
		parentCls: '.parentCls', // 目标元素的父类
		align: 'right' // 对齐方式有 ['top','bottom','left','right']四种 默认为top
	};

	this.cache = {
		isFlag: false
	};
	this.init(options);
}

TextMagnifier.prototype = {

	constructor: TextMagnifier,

	init: function (options) {
		this.config = $.extend(this.config, options || {});
		var self = this,
		_config = self.config,
		_cache = self.cache;

		self._bindEnv();

	},
	/*
	 * 在body后动态添加HTML内容
	 * @method _appendHTML
	 */
	_appendHTML: function ($this, value) {
		var self = this,
		_config = self.config,
		_cache = self.cache;

		var html = '',
		$parent = $($this).closest(_config.parentCls);

		if ($('.js-max-input', $parent).length == 0) {
			html += '<div class="js-max-input"></div>';
			$($parent).append(html);
		}
		//var value = self._formatStr(value);
		
		//获取对应的FullName
		var NameValue = $($this).closest("div.train-psinfo-div").find("input[name='guestName']").val();

		var sBox = "<div><div class=\"name-area\"><div class=\"name-area-div\"><div class=\"name-oninput\"> " +
			"<div class=\"name-inputtitle\">Document No. </div>" +
			"<div class=\"name-inputarea\">" + value + "</div>" +
			"</div>" +
			"<div class=\"name-sample\">Your full name</div>" +
			"<div class=\"name-fullname\">"+NameValue+"</div>" +
			"</div></div><div class=\"triangle_border_down\"></div></div>";

		$('.js-max-input', $parent).html(sBox);
	},
	/*
	 * 给目标元素定位
	 * @method _position
	 * @param target
	 */
	_position: function (target) {
		var self = this,
		_config = self.config;
		var elemWidth = $(target).outerWidth(),
		elemHeight = $(target).outerHeight(),
		elemParent = $(target).closest(_config.parentCls),
		containerHeight = $('.js-max-input', elemParent).outerHeight();

		$(elemParent).css({
			"position": 'relative'
		});

		switch (true) {

		case _config.align == 'top':

			$('.js-max-input', elemParent).css({
				'position': 'absolute',
				'top': -elemHeight * 2 - containerHeight / 2,
				'left': 0
			});
			break;

		case _config.align == 'left':

			$('.js-max-input', elemParent).css({
				'position': 'absolute',
				'top': 0,
				'left': 0
			});
			break;

		case _config.align == 'bottom':

			$('.js-max-input', elemParent).css({
				'position': 'absolute',
				'top': elemHeight + 4 + 'px',
				'left': 0
			});
			break;

		case _config.align == 'right':

			$('.js-max-input', elemParent).css({
				'position': 'absolute',
				'top': 0,
				'left': elemWidth + 2 + 'px'
			});
			break;
		}
	},
	/**
	 * 绑定事件
	 * @method _bindEnv
	 */
	_bindEnv: function () {
		var self = this,
		_config = self.config,
		_cache = self.cache;

		// 实时监听输入框值的变化
		$(_config.inputElem).each(function (index, item) {

			$(item).keyup(function (e) {
				var value = $.trim(e.target.value),
				parent = $(this).closest(_config.parentCls);

				self._appendHTML($(this), value);
				self._position($(this));

				if (value == '') {
					self._hide(parent);
				} else {

					var html = $.trim($('.js-max-input', parent).html());

					if (html != '') {
						self._show(parent);
					}
				}

			});

			$(item).unbind('focusin');
			$(item).bind('focusin', function () {

				self._appendHTML($(this), $(this).val());
				self._position($(this));

				var parent = $(this).closest(_config.parentCls),
				html = $.trim($('.js-max-input', parent).html());

				if (html != '') {
					self._show(parent);
				}
			});

			$(item).unbind('focusout');
			$(item).bind('focusout', function () {
				var parent = $(this).closest(_config.parentCls);
				self._hide(parent);
			});
		});
	},
	/*
	 * 显示 放大容器
	 * @method _show
	 */
	_show: function (parent) {
		var self = this,
		_config = self.config,
		_cache = self.cache;
		if (!_cache.isFlag) {
			$('.js-max-input', parent).show();
			_cache.isFlag = true;
		}
	},
	/*
	 * 隐藏 放大容器
	 * @method hide
	 * {public}
	 */
	_hide: function (parent) {
		var self = this,
		_config = self.config,
		_cache = self.cache;
		if (_cache.isFlag) {
			$('.js-max-input', parent).hide();
			_cache.isFlag = false;
			$('.js-max-input').remove();
		}
	}
};