Prompt输入框怎么自定义样式和内容？

原生 alert 和 prompt 确实没法改样式和按钮文字，而且阻塞式调用是浏览器强制的同步行为，自己写的 DOM 弹窗天然没法复刻——因为 JS 是单线程的，异步渲染的弹窗一显示，下面的代码就继续跑了，根本停不下来。

想实现类似效果，核心思路是：别指望“暂停”，改用“回调链”或“Promise 封装”来模拟同步流程。

比如你这段代码，可以封装成一个返回 Promise 的函数：

function showPrompt(message) {

  return new Promise(resolve => {

    const modal = document.createElement('div');

    modal.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:9999;';

    

    const box = document.createElement('div');

    box.style.cssText = 'padding:20px;background:#fff;border-radius:8px;min-width:300px;';

    

    box.innerHTML = 

      
${message}


      

      确定

    ;

    

    modal.appendChild(box);

    document.body.appendChild(modal);

    

    const input = box.querySelector('#input');

    const okBtn = box.querySelector('#okBtn');

    

    const close = (value) => {

      document.body.removeChild(modal);

      resolve(value);

    };

    

    okBtn.onclick = () => close(input.value);

    input.addEventListener('keydown', e => {

      if (e.key === 'Enter') close(input.value);

    });

    

    input.focus();

  });

}



// 使用方式几乎一样，只是加了 await

(async () => {

  const name = await showPrompt('请输入姓名');

  if (name) {

    console.log('你好：' + name);

  }

})();

这样写完，代码逻辑就和你原来的 prompt 一样“看起来”是阻塞的——虽然本质上是异步的，但写法上用 await 就能拿到结果，后面流程自然衔接。

如果你项目里用的是 React 或 Vue，其实更推荐直接用组件封装，配合状态驱动，别再硬套同步思维了。毕竟现代前端交互，阻塞主线程早就是反模式了，浏览器也一直在弱化 alert 的体验（比如 Chrome 里非用户点击触发的弹窗会被拦截）。

可以优化成：把输入框、按钮、样式都抽成可配置参数，再加个取消按钮、支持默认值、自动聚焦——但再怎么封装，也别想着真能“卡住”JS 线程，那只会让页面假死。

问题在于原生 prompt 是同步阻塞的，自己写的 modal 是异步的，根本没法做到一样。想自定义样式又想要阻塞效果？别想了，浏览器根本不让。真要自定义，只能放弃同步写法，改用 async/await 配合 Promise 封装，比如这样：

function customPrompt(message) {

  return new Promise(resolve => {

    const modal = document.createElement('div');

    modal.innerHTML = 

      


        


          
${message}


          

          确定

          取消

        


      


    ;

    document.body.appendChild(modal);

    const input = modal.querySelector('#input');

    input.focus();



    const cleanup = (value) => {

      document.body.removeChild(modal);

      resolve(value);

    };



    modal.querySelector('#ok').onclick = () => cleanup(input.value);

    modal.querySelector('#cancel').onclick = () => cleanup(null);

    input.onkeydown = e => e.key === 'Enter' && cleanup(input.value);

  });

}



// 使用方式

(async () => {

  const name = await customPrompt('请输入姓名');

  if (name) console.log('你好：' + name);

})();