let $input = $('.input [contenteditable]')
let $keyboard = $('.keyboard')
$input.on('focus', function () {$keyboard.show()})

$input.on('keydown paste', function (e) {
  e.preventDefault()
})

$keyboard.on('click', 'li', function () {
  const $this = $(this)
  if($this.attr('data-backspace')) {
    let sel = window.getSelection()
    let start = sel.baseOffset
    let end = sel.extentOffset
    let text = $input.text()
    $input.focus()
    console.log(start, end)
    if (start - end) {
      console.log(text.slice(0, start),text.slice(end))
      $input.text(`${text.slice(0, start)}${text.slice(end)}`)
    } else {
      $input.text(`${text.slice(0, start - 1)}${text.slice(start)}`)
    }
  } else {
    $input.text(`${$input.text()}${$this.text()}`)
  }
})