JS text input box magnifiers

This afternoon I studied "text input box magnifiers". Of course, this component is also available on the official KISSY website. Please refer to the kissy demo. In fact, this effect should not be unfamiliar to many children's shoes! At the earliest this year, I added a contact on the 12306 official website to enter a phone number! As shown in: So this afternoon I will study this and share it with you! A simple DEMO jSFiddle URL is also provided as follows: JSFiddle link: to view the effect! Click me gently! Basic principle: in fact, the basic principle is also very simple! Through JS, we constantly listen for changes in the value of the input box (through the keyup event in jquery). If there is a value, we assign the content value to the display div. The configuration parameters are as follows: inputElem '. inputElem ', the target element parentCls in the input box '. parentCls, the parent class align 'top' of the target element. The alignment methods include ['top', 'bottom ', 'left ', 'right'] top splitType [3, 4] by default. The sharding rule is delimiter '-'. The separators can be customized. Component limitations: 1. you cannot right-click a copy, cut, or paste event. Currently, only keyboard operations are supported. However, KISSY supports this because KISSY has a valueChange event that can constantly listen to keyboard operations (the principle is to use a timer to continuously detect input boxes that are worth changing), right-click operations, and other events, that is to say, you can monitor the previous value of the input box in real time and it is worth changing. But Jquery does not have this event currently. So currently, I only use the keyup event for a demo. Although oninput & onpropertychange monitors changes in the input box values in real time on the Internet. But I also tried to have a problem in window7 IE, especially in IE9! This is not supported! Therefore, this is not used for listening. As for the "valueChange" event Method in KISSY, I want to steal their code to transform it when I have time! Haha! Code Analysis: HTML code: <div class = "parentCls"> <input type = "text" class = "inputElem" autocomplete = "off" maxlength = "11"/> </div> parent level class Name: "parentCls" (required, of course, you can define the configuration items above ). The default input name is "inputElem" (which can be customized ). The HTML structure is like this. Now let's analyze the JS Code: 1. initialize and bind the event: copy the code/*** bind event ** @ method _ bindEnv */_ bindEnv: function () {var self = this, _ config = self. config, _ cache = self. cache; // monitors changes in the input box value in real time $ (_ config. inputElem ). each (function (index, item) {$ (item ). keyup (function (e) {var value = pai.trim(e.tar get. value), parent = $ (this ). closest (_ config. parentCls); if (value = '') {self. _ hide (parent);} else {var html = $. trim ($ ('. js-max-inpu T', 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 = pai.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) ;}) ;}, copy the code and perform the following events: 1. constantly using keyup to listen for input is worth changing. 2. dynamically generate HTML code for amplification. 3. If the value of the input box is null, The div element of the zoom-in effect is hidden; otherwise, the opposite is true! 4. is to locate the element. Currently, four types of positioning are supported: top (top), bottom (bottom), left (left), right (right ), in JSFiddle demo, three types of positioning are done (top, right, bottom ). The left side is generally unlikely. 5. Bind a click focus event and a focus loss event. (Click the focus to show and hide without the focus. 2. format the display method: the code is as follows: copy the code/*** format * @ 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) ;}, copy the code ratio For example, if I enter 11122233344 and can only display 11 numbers, if I use the "-" separator to split the rule: splitType: [, 4]. the display method should be: 111-2223-3344, of course, other separators can be used for display. The above code implements such an event. That's all! Paste the code below! You can directly read the code. If you do not understand the code, please leave a message. Thank you! HTML code: copy the Code