|
|
@@ -0,0 +1,62 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <script>
|
|
|
+
|
|
|
+ function Password(parent, open) {
|
|
|
+
|
|
|
+ const input = document.createElement('input');
|
|
|
+ input.type = 'password';
|
|
|
+ parent.appendChild(input);
|
|
|
+
|
|
|
+ const button = document.createElement('button');
|
|
|
+ button.type = 'button';
|
|
|
+ button.textContent = 'показать';
|
|
|
+ parent.appendChild(button);
|
|
|
+
|
|
|
+ button.addEventListener('click', () => {
|
|
|
+ this.setOpen(open !== true);
|
|
|
+ });
|
|
|
+
|
|
|
+ this.setValue = newValue => input.value = newValue;
|
|
|
+
|
|
|
+ this.getValue = () => input.value;
|
|
|
+
|
|
|
+ this.setOpen = openUpdate => {
|
|
|
+ open = openUpdate;
|
|
|
+ if(typeof this.onOpenChange === 'function') {
|
|
|
+ this.onOpenChange(openUpdate);
|
|
|
+ }
|
|
|
+ button.textContent = (openUpdate) ? 'показать' : 'скрыть';
|
|
|
+ input.type = (openUpdate) ? 'password' : 'text';
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getOpen = () => open;
|
|
|
+
|
|
|
+ input.addEventListener('input', event => {
|
|
|
+ if (typeof this.onChange === 'function'){
|
|
|
+ this.onChange(event.target.value);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ let p = new Password(document.body, true);
|
|
|
+
|
|
|
+ p.onChange = data => console.log(data);
|
|
|
+ p.onOpenChange = open => console.log(open);
|
|
|
+
|
|
|
+ p.setValue('qwerty');
|
|
|
+ console.log(p.getValue());
|
|
|
+
|
|
|
+ p.setOpen(false);
|
|
|
+ console.log(p.getOpen());
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
Анатолий Пивоварский