JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<h2>输入框放大镜的demo</h2>
	<div style="height:50px;"></div>

	<div style="margin-left:56px; margin-top:6px;">我的方向是向上,允许输入长度11位</div>
	<div class="parentCls">
		<input type="text" class="inputElem" autocomplete = "off" maxlength="11"/>
	</div>
	
	<div style="margin-left:56px; margin-top:6px;">我的方向是向右,允许输入长度18位</div>
	<div class="parentCls">
		<input type="text" class="inputElem1" autocomplete = "off" maxlength="18"/>
	</div>
	
	<div style="margin-left:56px; margin-top:6px;">我的方向是向下,允许输入长度18位</div>
	<div class="parentCls">
		<input type="text" class="inputElem2" autocomplete = "off" maxlength="18"/>
	</div>

CSS

* {margin:0;padding:0;}
	 .parentCls {margin:5px 60px 0;}
	 .js-max-input {border: solid 1px #ffd2b2;background: #fffae5;padding: 0 10px 0 10px;font-size:20px;color: #ff4400}

JavaScript

/**
 * JS 文本输入框放大镜效果
 * @author tugenhua
 * @time 2014-1-16 
 */ 

 function TextMagnifier(options) {

	 this.config = {
		
		inputElem          :     '.inputElem',     // 输入框目标元素
		parentCls          :     '.parentCls',     // 目标元素的父类
		align              :     'right',          // 对齐方式有 ['top','bottom','left','right']四种 默认为top
		splitType          :     [3,4,4],          // 拆分规则
		delimiter          :     '-'               // 分隔符可自定义
	 };

	 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);
			 $('.js-max-input',$parent).html(value);
	 },
	 /*
	  * 给目标元素定位
	  * @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 - containerHeight/2,'left':0});
				break;
			
			case _config.align == 'left':

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