javascript - 自定义提示功能尚未完全完成

我正在开发一个基于浏览器的文本样式游戏（这是一个使用一些图像/动画，但文本可以传达故事/动作/命令的文本游戏）。
我曾经通过prompt("What is your class?");（Warrior，向导ETC）使它工作，但是想要创建自己的函数来使其更漂亮。
下面的一些代码：

/*
    1st value: Message being asked
    2nd value: input field being used
    3rd value: message block where question is presented
*/
var _cprompt = cPrompt('What is your class?', 'dialog-input', 'dialog-text');
alert(_cprompt);

这是实际的函数cPrompt（）;

/*
Custom prompt class
message: The message shown
inputField: The ID of the txtfield where the user inputs his answer
messageField: The textarea where the response appears
userInput: Empty variable to store the users input
*/

function cPrompt(mssg, inputFieldId, messageFieldId) {
    var message = mssg;
    var inputField = $('#'+inputFieldId);
    var messageField = $('#'+messageFieldId);
    var userInput = "";

    messageField.append(message);

    // Detect enter space being pressed in inputField
    inputField.keyup(function (e) {
        if (e.keyCode == 13) {
            userInput = inputField.val();
        }
    });
}

到目前为止，还不错，但是我需要它阻止其他代码执行，直到用户填写了一个响应并按下Enter键（类似于prompt();），因此在这种情况下，直到用户执行了该操作，它才执行alert(_cprompt);给一些输入，然后按回车。

我尝试使该函数尽可能地动态，但请随时添加任何可能使其更好/更快/更容易使用的东西。

谢谢你的帮助。

最佳答案

使用回调是在事件发生后执行操作的好方法。在这种情况下，事件将是“用户填写响应”。在http://jsfiddle.net/Q2qUK/2/处查看工作示例。

<div id="dialog-text"></div>
<input id="dialog-input" />

在合适的时候，可以在cPrompt函数中像其他任何函数一样运行回调函数。无需返回值，而是将结果作为参数传递给回调函数。

function cPrompt(mssg, inputFieldId, messageFieldId, callback){
    var message = mssg;
    var inputField = $('#'+inputFieldId);
    var userInput = "";

    cNotify(messageFieldId, message);

    // Detect enter space being pressed in inputField
    inputField.on('keyup', function (e) {
        if (e.keyCode == 13) {
            userInput = inputField.val();
            callback(userInput);

            // If you want the callback to only be executed once,
            // unbind the keyup event afterwards.
            inputField.off('keyup');

            // Empty the input field after processing the user's message.
            inputField.val('');
        }
    });
}

作为如何让您的编码响应用户输入的示例，我创建了此cNotify函数，以在对话框文本元素中显示用户输入。

function cNotify(messageFieldId, message){
    $('#' + messageFieldId).append('<div>' + message + '</div>');
}

要传递回调，请使用匿名函数作为cPrompt函数的参数。

cPrompt('What is your class?', 'dialog-input', 'dialog-text', function(_cprompt){

    // Here you put all the code you want to run after the user pressed enter.
    cNotify('dialog-text', _cprompt);
});