JS imitation Alipay input input display digital magnifying glass-JS Tutorial-php.cn

This article brings you an example of a JS imitation Alipay input text input box amplification component. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

You can display a digital magnifying glass behind when inputting

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>JS 仿支付宝input文本输入框放大组件</title>
 <script src="js/jquery.min.js"></script>
 <style>
  * { margin: 0; padding: 0; border-width: 1px; }
  .parentCls {margin:5px 60px 0;}
  .js-max-input {border: solid 1px #ffd2b2; position:relative;background: #fffae5;padding: 0 10px 0 10px;font-size:20px;color: #ff4400}
  .inputElem4{ width: 300px; height: 36px; border: 1px solid #E0E0E0; padding-left: 10px; line-height: 36px; font-size: 14px; }
 </style>
 </head>
 <body>
 <p class="parentCls">
  <input type="text" class="inputElem4" autocomplete = "off" maxlength="18"/>
 </p>
  <script src="js/jq22.js"></script>
  <script>
   // 初始化
   $(function(){
   new TextMagnifier({
    inputElem: '.inputElem4',
    align: 'bottom',
    splitType: [6,4,4,4]
   });
   });
  </script>
 </body>
</html>

Copy after login

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

/**
 * JS 仿支付宝的文本输入框放大组件
 */ 
 
 
 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 += '<p class="js-max-input"></p>';
    $($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 == '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);
    if(value == '') {
     self._hide(parent);
    }else {
 
     var html = $.trim($('.js-max-input',parent).html());
 
     if(html != '') {
      self._show(parent);
     }
    }
    self._appendHTML($(this),value);
    self._position($(this));
   });
 
   $(item).unbind('focusin');
   $(item).bind('focusin',function(){
    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 _formatStr
  */
  _formatStr: function(str){
  var self = this,
   _config = self.config,
   _cache = self.cache;
  var count = 0,
   output = [];
  for(var i = 0, ilen = _config.splitType.length; i < ilen; i++){
   var s = str.substr(count,_config.splitType[i]);
   if(s.length > 0){
    output.push(s);
   }
   count+= _config.splitType[i];
  }
  return output.join(_config.delimiter);
  },
  /*
  * 显示 放大容器
  * @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;
  }
  }
 };

Copy after login

Rendering

##Related recommendations:

What should I do if the input on the Angular mobile page cannot be entered?

Example of how to control the input input format in html

JS method for limiting the input value of the input box to floating point

The above is the detailed content of JS imitation Alipay input input display digital magnifying glass. For more information, please follow other related articles on the PHP Chinese website!