phone input

src/view/cmp/field/Field.scss

@@ -98,3 +98,39 @@
     letter-spacing: 0.01em;
   }
 }
+
+.field__phone-display, .field__phone-hidden {
+  white-space: pre;
+}
+
+.field__phone-hidden {
+  opacity: 0;
+  background: #27EF60;
+}
+.field__phone-display, .field__phone-placeholder {
+  position: absolute;
+  box-sizing: border-box;
+  padding: 0;
+  width: 300px;
+  max-width: 100%;
+  height: 50px;
+  font-weight: 500;
+  text-align: center;
+  font-size: 17px;
+  line-height: 36px;
+  color: #000000;
+  margin: 6px 0;
+}
+
+.field__phone-placeholder {
+  font-weight: 500;
+  margin: 6px 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  visibility: hidden;
+  color: $gray-medium
+}
+.field__phone-placeholder__visible {
+  visibility: visible;
+}
\ No newline at end of file

src/view/cmp/field/PhoneInput.jsx

 import Input from './Input.jsx';
 
+function setCaretPosition(el, caretPos) {
+  el.value = el.value;
+  // ^ this is used to not only get "focus", but
+  // to make sure we don't have it everything -selected-
+  // (it causes an issue in chrome, and having it doesn't hurt any other browser)
+
+  if (el !== null) {
+
+    if (el.createTextRange) {
+      var range = el.createTextRange();
+      range.move('character', caretPos);
+      range.select();
+      return true;
+    }
+
+    else {
+      // (el.selectionStart === 0 added for Firefox bug)
+      if (el.selectionStart || el.selectionStart === 0) {
+        el.focus();
+        el.setSelectionRange(caretPos, caretPos);
+        return true;
+      }
+
+      else  { // fail city, fortunately this never happens (as far as I've tested) :)
+        el.focus();
+        return false;
+      }
+    }
+  }
+};
+
 export default D.declare('view.cmp.field.PhoneInput', (cfg, children)=> {
-  return <div class={D.cls( "labeled-field", cfg.cls, { "labeled-field--invalid": cfg.invalid } )}>
-    <label class="labeled-field__label">2
-      <span class="labeled-field__label-text">{cfg.label}</span>
-      <Input class="labeled-field__input" type={cfg.type} placeholder={cfg.placeholder} {...cfg}/>
-    </label>
-    {children}
+  let displayDOM,placeholderDOM, inputDOM,
+      dom = <div class='field__input-wrapper field__phone-wrapper'>
+        {displayDOM = <div class={'field__phone-display'}/>}
+        {placeholderDOM = <div class={'field__phone-placeholder'}>{cfg.placeholder||'Ваш номер'}</div>}
+
+
+        <div class='field__input'>
+          {inputDOM =
+            <input
+              class="field__input field__phone-hidden"
+              type={'tel'}
+            />
+          }
+
         </div>
+
+      </div>;
+  let focused = false;
+
+  if(cfg.bind){
+    var update = function (val) {
+      val = val+'';
+      inputDOM.value = val;
+      let built = [];
+      if((val !== '' && val !== '7' && val !== '8') || focused){
+        const pattern = '+0 (000) 000-00-00';
+        let pos = 0;
+        for( let i = 0, _i = pattern.length; i < _i; i++ ){
+          const char = pattern[ i ];
+          if( char === '0' ){
+            built.push( val[ pos ] === void 0 ? ' ' : val[ pos ] );
+            pos++;
+          }else{
+            built.push( char );
+          }
+        }
+      }
+      if(built.length === 0){
+        placeholderDOM.classList.add('field__phone-placeholder__visible');
+      }else{
+        placeholderDOM.classList.remove('field__phone-placeholder__visible');
+      }
+      displayDOM.innerText = built.join('');
+
+    };
+    cfg.bind.sub(update);
+    inputDOM.addEventListener('keypress', function (e) {
+      if(inputDOM.value.length+(e.data!==null?e.key.length:0)>12){
+        e.preventDefault()
+      }
+      valueGetter();
+    });
+    var valueGetter = function() {
+      cfg.bind.set((inputDOM.value+'').substr(0,11));
+    };
+    inputDOM.addEventListener('keyup', valueGetter);
+    inputDOM.addEventListener('input', valueGetter);
+
+    var focus = function(e) {
+      focused = true;
+      setTimeout(()=> setCaretPosition(inputDOM, inputDOM.value.length),0);
+      update(inputDOM.value);
+    };
+    inputDOM.addEventListener('focus', focus);
+    inputDOM.addEventListener('click', focus);
+
+    inputDOM.addEventListener('blur', function() {
+      focused = false;
+      update(inputDOM.value);
+    });
+  }
+
+  return dom;
 })

src/view/page/tmp/Fields.jsx

 import Button from "/view/cmp/button/Button.jsx";
 import LabeledField from "../../cmp/field/LabeledField.jsx";
 import PhoneInput from "../../cmp/field/PhoneInput.jsx";
+import Input from "../../cmp/field/Input";
 export default D.declare('view.page.tmp.Fields', () => {
+  var data = new Store({
+    phone: '',
+    phone3: '7',
+    phone4: '8',
+    phone5: '79132251365',
+    phone2: '894',
+  });
   return <div>
     <div>
       <h5>Labeled field</h5>
@@ -9,9 +17,36 @@ export default D.declare('view.page.tmp.Fields', () => {
     </div>
 
     <div>
-      <h5>Phone input</h5>
+        <h3>Phone input</h3>
+      <div style={{display: 'flex'}}>
+        <div>
+          <h5>Empty</h5>
+
+          <PhoneInput label={'Label'} bind={data.bind('phone')}/>
+          <Input bind={data.bind('phone')}/>
+        </div>
+        <div>
+          <h5>Code +7</h5>
+          <PhoneInput label={'Label'} bind={data.bind('phone3')}/>
+          <Input bind={data.bind('phone3')}/>
+        </div>
+        <div>
+          <h5>Code +8</h5>
+          <PhoneInput label={'Label'} bind={data.bind('phone4')}/>
+          <Input bind={data.bind('phone4')}/>
+        </div>
+        <div>
+          <h5>Partial</h5>
+          <PhoneInput label={'Label'} bind={data.bind('phone2')}/>
+          <Input bind={data.bind('phone2')}/>
+        </div>
 
-      <PhoneInput label={'Label'}/>
+        <div>
+          <h5>Filled</h5>
+          <PhoneInput label={'Label'} bind={data.bind('phone5')}/>
+          <Input bind={data.bind('phone5')}/>
+        </div>
+      </div>
     </div>
   </div>
 });
\ No newline at end of file