自定义提示功能未完成

Question

我正在开发一个基于浏览器的文本风格游戏（这是一个使用一些图像/动画的文本游戏，但使用文本来传达故事/动作/命令）。 我曾经通过prompt("What is your class?");（Warrior，Wizard 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();
        }
    });
}

到目前为止一切都很好，但我需要它来阻止其他代码执行，直到用户填写响应并按下回车键（类似于 prompt();），所以在这种情况下它不会执行 alert(_cprompt); 直到用户给出了一些输入并按回车键。

我尝试使函数尽可能动态化，但请随意添加任何可能使其更好/更快/更易于使用的内容。

感谢您的帮助。

Answer 1

使用回调是在事件发生后执行操作的好方法。在这种情况下，事件将是“用户填写响应”。在这里查看一个工作示例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);
});

Answer 2

使用回调。

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

    messageField.append(message);

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

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