需要Javascript自定义提示框帮助答案

【问题标题】：Javascript Custom prompt box help needed需要Javascript自定义提示框帮助
【发布时间】：2014-08-15 06:51:01
【问题描述】：

我为 Javascript 制作了一个自定义提示框，因此我不必使用现有的提示框，但是我无法弄清楚如何直接从 cPrompt() 函数返回值。我希望能够像普通提示一样使用它，并且能够执行 var name = cPrompt("Whats your name") 之类的操作，但是要关闭自定义提示，我必须在单击按钮时使用一个事件来触发一个名为 ok() 的函数。这使我无法直接从 cPrompt 函数返回值。谁能弄清楚我该怎么做？这是我的代码：

HTML：

    <html>
<head>
    <title>Custom Prompt</title>
</head>
<body>
    <p>content</p>
    <button onclick="cPrompt('Message goes here')">Click me</button>
    <div id="overlay"></div>
    <div id="pBox">
        <div id="cPromptOut" onclick="ok()"></div>
        <input type="text" id="cPromptIn"/>
    </div>
    <link rel='stylesheet' href='customPrompt.css'/>
    <script src='customPrompt.js'></script>
</body>
</html>

CSS：

#overlay{
    width:100%;
    height:100%;
    position:fixed;
    background-color:grey;
    opacity:0.5;
    z-index: 10;
    display: none;
    left:0;
    top:0;
}
#pBox{
    width:50%;
    height:30%;
    position:fixed;
    background-color:red;
    left:25%;
    top:20%;
    z-index: 11;
    display:none;
}
#cPromptOut{
    width:100%;
    height:50%;
    background-color: green;
    z-index: 12;
    text-align: center;
    font-size: 1.5em
}
#cPromptIn{
    width:100%;
    height:50%;
    border:1px solid black;
    text-align: center;
    font-size: 1.5em
}

JS：

var overlay = document.getElementById("overlay")
var pBox = document.getElementById("pBox")
var cPromptOut = document.getElementById("cPromptOut")
var In = document.getElementById("cPromptIn").value
function cPrompt(msg){
    
    overlay.style.display = "block";
    pBox.style.display = "block";
    cPromptOut.innerHTML = msg;

}
function ok(){
    overlay.style.display = "none";
    pBox.style.display = "none";
}

console.log(cPrompt("enter you name"))

所以现在我无法收集框中的值。谁能弄清楚我该怎么做？请记住，我希望能够像提示一样调用它，而不必使用任何其他调用，例如 console.log(cPrompt("say something"))。我可能试图过度思考这个或者可能是不可能的，欢迎任何想法。

【问题讨论】：

标签： javascript return dom-events custom-controls prompt

【解决方案1】：

编辑 - 好的，所以它不会像 console.log(cPrompt('message')) 那样简单，但是有一种 kinda 方法可以做你想做的事。参见 this fiddle 改编自 toby Ho's trampolines。由于某种原因，我无法使其在 chrome 中工作，但 Firefox 可以解决问题。最酷的部分在 main() 中（它必须在 run(main()) 调用中

function main(){
    log('start listening');
    log(yield prompt('hello'));//the code "seems" to halt here.
    log('end script');
}

你又问了一些非常难的问题，所以它不会像你希望的那样简单，但它就是这样。此外，如果您能告诉我们到目前为止您的尝试，那也很酷。

编辑前：

乍一看，我会说这是不可能的。如果您的cPrompt() 函数包含解释器以便它可以返回用户的输入，我认为页面将冻结。你试过这样的事情吗？

//This will probably freeze the page
function cPrompt(_msg){
    ...//init the prompt
    while( input == null){}//your prompt sets input in an event
    return input;
}

通常的方法是通过这样的闭包

function whenInput(_input){console.log(_input);}
cPrompt('message', whenInput);

现在，我认为 js 1.7 中的新 generators 可能有一种方法。

那么，你有什么尝试？

【讨论】：

第一个使用 while 循环的方法不起作用，因为它返回太早或导致太多递归错误，我从未见过第二个示例，您能解释一下它是什么以及什么_input 是什么意思？
正如我所说，第一段代码将冻结页面。第二种是常见的，但它不会达到你想要的。在这里你可以了解更多关于闭包的信息developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures
好的，所以你的问题引起了我的兴趣，事实证明可能有一种方法，通过“蹦床”：tobyho.com/2010/12/10/trampolines-in-javascript-and。请注意，它非常令人费解。我做了一个好的开始，但我最终无法返回值：jsfiddle.net/Ybq5e/10
在不返回变量的情况下，它很容易做到，但我希望它像普通的 prompt() 函数一样工作，而不必将结果保存到另一个变量
我已经进一步研究过，console.log(yield cPrompt('what ya gonna do?')); 可以看到我的编辑。