javascript 替代提示功能答案

【问题标题】：javascript alternative to prompt functionjavascript 替代提示功能
【发布时间】：2013-07-10 11:59:30
【问题描述】：

我需要像 C++ 中的 cin 这样的东西；

有提示，但弹出窗口破坏了体验（并且隐藏了一些页面，并且不允许您滚动）。

我知道如何使用输入法，我用过 javascript 一年左右，并且有编程背景。

我需要的是一个函数，它在某个 div 中创建一个输入，然后等待用户输入并且不执行任何其他代码，直到他得到用户提交的文本。

类似的东西。

var a = cin("#somediv","enter text here");
alert(a);

我上次尝试的结果是 alert 说“null”；这意味着它只是在没有等待输入的情况下执行。

【问题讨论】：

您的cin 函数必须接受回调，然后在用户完成时调用它，而不是尝试阻止。您不能创建像 prompt 这样的函数，它们实际上会停止 JavaScript 并让它在用户执行某些操作时等待函数。而且您不想这样做，部分原因是您确定的。 :-)
您正在寻找的是一个模态对话框。如果你搜索，你会发现相当多的选项。
现在我了解你的previous question :)。
请不要发布同一问题的多个副本。如果您没有得到上一个问题的答案，请使用“编辑”链接修复它。你应该删除这个问题。
Teemu：用斯堪的纳维亚键盘？我印象深刻。 T.J.克劳德：谢谢我不这样做。我不想向 stackoverflow 发送垃圾邮件

标签： javascript

【解决方案1】：

您可以使用 JavaScript 和 HTML 手动执行此操作。这实际上很流行，所以请查看jQuery UI，它可以创建灵活的对话框，并且您可以设置不同于提示的样式。

【讨论】：

【解决方案2】：

函数实际调用prompt()

var bananas = prompt("Please type how many bananas you'd like");
alert("Here you have "+ bananas +" number of bananas. Smile!");

如果你想让一个输入字段锁定页面，你必须在页面上做某种覆盖，并在上面显示输入；禁止用户进行除字段之外的任何其他交互。

编辑：我所说的覆盖是这样的：

HTML

<html>
    <body>
        <div id="overlay"></div>
        <form id="field">
            <input type="text" name="test" />
            <input type="submit" value="Continue" />
        </form>
    </body>
</html>

CSS

#overlay {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
#field {position:absolute; width:200px; height:200px; top:50%; left:50%; margin:-100px 0 0 -100px; z-index:10;}

JavaScript

$('#field').on('submit', function(e) {
    e.preventDefault();

    // Do some validation and such, and when done, hide the overlay and field
    $('#field, #overlay').hide();
});

【讨论】：

他不想使用提示符。