CoolInput.min.js 6.5 KB

123456789101112131415161718192021
  1. function CoolInput(n){function s(){for(var r=navigator.userAgent,t=["Android","iPhone","Windows Phone","iPad","iPod"],i=!0,n=0;n<t.length;n++)if(r.indexOf(t[n])>0){i=!1;break}return i}function i(n){if(n!=undefined)r.tagName==="DIV"?r.innerText=n:r.value!=undefined&&(r.value=n);else{if(r.tagName==="DIV")return r.innerText;if(r.value!=undefined)return r.value}}function u(n,i){var r=window.coolInputTmpDiv,u,f,e;return r||(r=window.coolInputTmpDiv=$('<div style="position:fixed;display:block;z-index:99999;top:300px;left:100px;visibility:hidden;"><div>'),$(document.body).append(r)),u=t.inputEl.css("font-size"),r.css("font-size",u),r.css("font-weight",t.inputEl.css("font-weight")),f=t.inputEl.css("letter-spacing"),r.css("letter-spacing",f),e=t.inputEl.css("font-family"),r.css("font-family",e),r.html(n),i&&(i.height=r[0].offsetHeight,i.width=r[0].offsetWidth),r[0].offsetWidth}function e(n){t.divCursor=$("#coolInputCursor");t.divCursor.length===0&&(t.divCursor=$('<div id="coolInputCursor" style="width:2px;z-index:99999;background-color:#000;position:fixed;display:none;"><\/div>'),$(document.body).append(t.divCursor));var i=0,u=t.inputEl.offset().left+t.cursorX,f=t.inputEl.offset().top,r=t.inputEl.height();r>=40?i=8:r>=30&&(i=3);t.divCursor.height(r-2*i);t.divCursor.css("left",u+"px");t.divCursor.css("top",f+i+"px");n?t.divCursor.show():t.divCursor.hide()}var t=this,f,r,o;if(t.cursorPosition=-1,t.cursorX=-1,t.focused=!1,t.inputEl=$(n.slt),f=t.inputEl.attr("v-model"),t.inputEl.attr("readonly","readonly"),t.inputEl.length===0)throw slt+" not exist";r=t.inputEl[0];CoolInput.arrInputEl||(CoolInput.arrInputEl=[]);CoolInput.arrInputEl.push(r);o=s();this.showPanel=function(r){function p(r){var s=r.target.innerText,o=i(),h=r.target,c;r.target.tagName!=="DIV"&&(h=$(r.target).parents("div")[0]);h.id==="del"?t.cursorPosition===i().length?(i(o.substr(0,o.length-1)),t.cursorX=u(i()),t.cursorPosition--):(i(o.substring(0,t.cursorPosition-1)+o.substring(t.cursorPosition,o.length)),t.cursorPosition--,t.cursorX=u(i().substring(0,t.cursorPosition))):s&&s.length===1&&"0,1,2,3,4,5,6,7,8,9,.".indexOf(s)>=0?t.cursorPosition===i().length?(i(o+s),t.cursorX=u(i()),t.cursorPosition++):(i(o.substring(0,t.cursorPosition)+s+o.substring(t.cursorPosition,o.length)),t.cursorPosition++,t.cursorX=u(i().substring(0,t.cursorPosition))):c=8;e(!0);n.data&&f&&(n.data[f]=i())}var h=t.Panel=$("#coolInputPanel"),v,y,k,d,s,c;if(h.length===0&&(v=`<style>
  2. #coolInputPanel>div{
  3. width: 31%;height:40px;text-align:center;line-height:40px;
  4. border-width:1px;border-style:solid;border-color:#cacaca;border-top-style:none;border-left-style:none;
  5. }
  6. #coolInputPanel>div:nth-child(n+10){border-bottom-style:none;}
  7. #coolInputPanel>div:nth-child(3n){ border-right-style:none;}
  8. #coolInputPanel>div:active{background-color:#7af;}
  9. </style>`,$(document.body).append($(v)),y=`
  10. <div id="coolInputPanel" style="background-color:#dedede;font-size:18px;font-weight:bold; position:fixed;left:0px;bottom:0px;width:100%;height:200px;display:flex;justify-content:center;align-content:center; flex-wrap:wrap;z-index:99999;">
  11. <div>1</div><div>2</div><div>3</div>
  12. <div>4</div><div>5</div><div>6</div>
  13. <div>7</div><div>8</div><div>9</div>
  14. <div>.</div><div>0</div>
  15. <div id="del">
  16. <svg style="display:inline;height:23px;width:23px;margin-top:9px;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
  17. <g><g transform="translate(0.000000,511.000000) scale(0.100000,-0.100000)"><path d="M3781.8,3617c-116.7-17.2-350.2-82.3-482.2-137.8c-344.4-141.6-317.6-118.6-1722.2-1519.4C186.2,572.5,191.9,578.2,126.9,329.5C73.3,119,100.1-104.9,205.3-317.3c40.2-78.5,311.9-363.6,1333.8-1387.4c1379.7-1381.6,1408.4-1408.4,1743.3-1548.1c82.3-34.4,216.2-82.3,296.6-107.1l145.4-42.1l2669.4-5.7c1883-3.8,2698.1,1.9,2769,15.3c334.9,70.8,616.2,342.5,704.2,683.2c44,164.6,44,5472.9,0,5637.4c-86.1,331.1-340.6,587.5-669.7,673.6c-99.5,24.9-436.3,28.7-2736.4,26.8C5019.9,3626.6,3814.3,3620.8,3781.8,3617z M9141.7,2968.3c28.7-21.1,70.8-63.1,91.9-91.9c40.2-51.7,40.2-55.5,40.2-2767c0-2711.6,0-2715.4-40.2-2767c-21.1-28.7-63.2-70.8-91.9-91.9c-51.7-40.2-61.2-40.2-2648.4-45.9c-2543.2-3.8-2598.7-3.8-2747.9,34.4c-84.2,21-225.8,72.7-315.7,116.7l-164.6,78.5L1998.3-1299C622.5,75,687.5,0.3,718.2,182.1c11.5,63.2,158.8,214.3,1280.2,1335.7c1264.9,1264.9,1266.8,1266.8,1429.4,1345.2c340.6,164.6,111,153.1,3056,149.3C9082.4,3008.5,9090.1,3008.5,9141.7,2968.3z"/><path d="M4566.4,1919.7c-78.5-34.4-158.8-132-174.1-212.4c-30.6-168.4-40.2-156.9,706.1-903.2l692.7-694.6l-692.7-692.7c-748.2-750.1-736.7-736.7-704.2-909c17.2-93.8,132-208.6,225.8-225.8c172.2-32.5,158.8-44,909,704.2l692.7,692.7l694.6-692.7c748.2-748.2,734.8-736.7,907-704.2c93.8,17.2,208.6,132,225.8,225.8c32.5,172.2,44,158.8-704.2,909l-692.7,692.7L7344.9,804c748.2,748.2,736.7,734.8,704.2,907.1c-17.2,93.8-132,208.6-225.8,225.8c-172.2,32.5-158.8,44-909-704.2L6221.6,540l-685.1,683.1c-375,375.1-708,692.7-736.7,704.2C4727.1,1954.1,4637.2,1950.3,4566.4,1919.7z"/></g></g>
  18. </svg>
  19. </div>
  20. </div>`,h=t.Panel=$(y),$(document.body).append(h)),o?h[0].onmousedown=p:h[0].ontouchstart=p,r,t.focused||t.Panel.css("display")==="none"&&(t.Panel.css("margin-bottom",-t.Panel.height()),t.Panel.show(),t.Panel.animate({"margin-bottom":"0px"},{duration:400})),k=t.inputEl.offset().top,d=t.inputEl.offset().left,r&&i().length!==0){var w=-1,l=-1;for(s=0;s<i().length;s++){var g=i().substring(0,s+1),a=u(g),nt=i().substr(s,1),b=u(nt);if(l=a-b/2,r.offsetX>w&&r.offsetX<=l){t.cursorPosition=s;t.cursorX=a-b;break}else s===i().length-1&&(t.cursorPosition=i().length,t.cursorX=a);w=l}}else t.cursorPosition=i().length,t.cursorX=u(i());t.tmCoolInput||(c=!0,t.tmCoolInput=setInterval(function(){e(c);c=!c},600));e(!0);t.focused=!0};r.onclick=t.showPanel;document.addEventListener("click",function(n){var u,i;t.focused&&n.target.id!=="coolInputPanel"&&n.target!==r&&((u=$(n.target).parents("#coolInputPanel"),u.length>0)||t.divCursor&&t.divCursor.length>0&&n.target===t.divCursor[0]||(i=!1,CoolInput.arrInputEl.every(function(t){return t===n.target?(i=!0,!1):!0}),i||(t.divCursor&&t.divCursor.hide(),t.Panel&&t.Panel.animate({"margin-bottom":"-200px"},{duration:400,complete:function(){t.Panel.hide()}})),t.tmCoolInput&&(clearInterval(t.tmCoolInput),t.tmCoolInput=0),t.focused=!1))})}