JSFiddle - React, Tailwind, and code Playground

by garmashnikolay

HTML

<input type="text" id="phone" value="">

SCSS

input{
    width: 200px
}

CoffeeScript

$.fn.caret = (begin, end) ->
  return  if @length is 0
  if typeof begin is "number"
    end = (if (typeof end is "number") then end else begin)
    @each ->
      if @setSelectionRange
        @setSelectionRange begin, end
      else if @createTextRange
        range = @createTextRange()
        range.collapse true
        range.moveEnd "character", end
        range.moveStart "character", begin
        try
          range.select()

  else
    if this[0].setSelectionRange
      begin = this[0].selectionStart
      end = this[0].selectionEnd
    else if document.selection and document.selection.createRange
      range = document.selection.createRange()
      begin = 0 - range.duplicate().moveStart("character", -100000)
      end = begin + range.text.length
    begin: begin
    end: end


jQuery ->
    String.prototype.replaceAt = (index, char) ->
        self = this
        if char != ""
            len = char.length
        else
            len = 1
        new_string = "#{self.substr(0, index)}#{char}#{self.substr(index+len, self.length-1)}"
        new_string
        

    mask = "(ddd) dd dd dd"
    
    deleting_code = false
    
    check_by_mask = (phone, cursor_pos, c_correction) ->
        pat = /[()\s-]/g
        mask_chars_positions = []
        digits_number = mask.replace(/[^0-9]/g, "").length

        while (match = pat.exec(mask))?
            mask_chars_positions.push match['index']
            
        t_mask = mask
        phone_cut_pos = 0
        pattern = /(d+)(?:[()\s-]|$)/g
        while (match = pattern.exec(mask))?
           phone_cut = phone.substr(phone_cut_pos, match[1].length)
           if phone_cut_pos < cursor_pos
              t_mask = t_mask.replaceAt(match['index'], phone_cut)
              phone_cut_pos += match[1].length
       
        t_mask = t_mask.replace(/d/g, "")
        
        before_cur = t_mask.substr(0, cursor_pos)
        spec_number = before_cur.replace(/\d/g, "").length
        if spec_number > 1
          ...