主页 / 问题 / 1483086
Accepted
eccs0103
Asked:2023-01-02 22:38:35 +0800 CST2023-01-02 22:38:35 +0800 CST

自定义提示[重复]

  • 772

描述

经过一番讨论，我决定创建自己的window.prompt(). 我的版本是这样的：

class Manager {
  static async prompt(message) {
    const dialog = document.body.appendChild(document.createElement(`dialog`));
    dialog.appendChild(document.createElement(`span`)).innerText = message;
    const input = dialog.appendChild(document.createElement(`input`));
    input.type = `text`;
    const promise = new Promise((resolve) => {
      dialog.addEventListener(`click`, (event) => {
        if (event.target == dialog) {
          resolve(input.value);
          dialog.remove()
        }
      });
    });
    dialog.showModal();
    return await promise;
  }
}

document.write(Manager.prompt(`Input text`));
* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

body {
  background-color: rgb(25, 25, 25);
  color: rgb(255, 255, 255);
}

body * {
  background-color: inherit;
  color: inherit;
  border-radius: 8px;
}

dialog {
  background-color: rgb(50, 50, 50);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: auto;
  padding: 8px;
}

input {
  background-color: rgb(25, 25, 25);
  padding: 8px;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 50%)
}

进入后，必须在窗口外点击，数值才传出。问题是无论我做什么，无论我在哪里喝酒都会async被await传染Promise<String>。

问题

但是我应该怎么做才能String像内置版本一样简单地传输它。

澄清

也许问题是我实施async和不正确await，因为我和他们一起工作了一点，我不知道所有的微妙之处。所以我很乐意接受一篇文章，其中有解决我的问题的方法并解释了为什么会发生这种情况。

javascript

1 个回答

  1. Best Answer

    您可以通过一个简单的回调来解决您的问题，以免遭受异步的困扰：

    class Manager {
  static prompt(message, callBack) {
    const dialog = document.createElement('dialog');
    const span = document.createElement('span');
    const input = document.createElement('input');
    
    span.innerText = message;
    input.type = 'text';
    
    dialog.addEventListener('click', (event) => {
      if (event.target !== dialog) return;

      callBack(input.value);
      dialog.remove();
    });
    
    dialog.append(span, input);
    document.body.append(dialog);
    
    dialog.showModal();
  }
}

Manager.prompt('Input text', (ans) => document.write(ans));
    * {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

body {
  //background-color: rgb(25, 25, 25);
  //color: rgb(255, 255, 255);
}

body * {
  background-color: inherit;
  color: inherit;
  border-radius: 8px;
}

dialog {
  background-color: rgb(50, 50, 50);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: auto;
  padding: 8px;
}

input {
  background-color: rgb(25, 25, 25);
  padding: 8px;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 50%)
}

    一旦开始编写async和/或使用Promise-s，您将需要在异步函数中调用整个函数或使用then. 对于为什么离不开它的详细解释，你可以阅读我的回答

    • 0

相关问题