main.js 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. function Password(parent, open = false) {
  2. let input = document.createElement('input')
  3. let checkBox = document.createElement('input')
  4. input.type = open ? 'text' : 'password'
  5. checkBox.type = 'checkbox'
  6. checkBox.checked = open
  7. parent.append(input)
  8. parent.append(checkBox)
  9. this.getValue = () => input.value
  10. this.getOpen = () => checkBox.checked
  11. this.setValue = newValue => input.value = newValue
  12. this.setOpen = () => checkBox.checked ? input.type = 'text' : input.type = 'password'
  13. input.oninput = () => this.onChange()
  14. checkBox.oninput = () => {
  15. this.setOpen()
  16. if (typeof this.onOpenChange === 'function') {
  17. this.onOpenChange(checkBox.checked)
  18. }
  19. }
  20. }
  21. let p = new Password(document.body, true)
  22. p.onChange = () => console.log(p.getValue())
  23. p.onOpenChange = (open) => console.log(open)
  24. p.setValue('qwerty')
  25. console.log(p.getValue())
  26. let login = new Password(document.body, false)
  27. let button = document.createElement('button')
  28. button.setAttribute('disabled', 'disabled')
  29. button.innerText = 'LogIn'
  30. document.body.append(button)
  31. let checkDisabled = () => p.getValue() !== '' && p.getValue() !== '' ? button.removeAttribute('disabled', 'disabled') : button.setAttribute('disabled', 'disabled')
  32. p.onChange = () => checkDisabled()
  33. login.onChange = () => checkDisabled()