Question

bootbox.dialog({
   size:large,
    title: 'Reasons for Rejection?',
    closeButton: true,
    message:
    '<div align="center"> ' +
    '<textarea cols="10" id="tarea" rows="10"></textarea> ' +
    '</div>  ',
    className: "medium",
    buttons: {
        cancel: {
            label: 'Cancel',
            className: 'btn-warning'
        },
        success: {
            label: "Save",
             className: "btn-success",
            callback: function () {
                var result=document.getElementById('tarea').value;
                console.log(result)
                if (result) {
                    timesheet_arr = getTimesheet.split('\\s+');
                    Timesheet = {
                        timesheet_arr: timesheet_arr,
                        status: approval_status,
                        comments: result
                    };
                    Timesheet = JSON.stringify(Timesheet);
                    $.post('http://localhost:8000/timer/approvetimesheet/', {'Timesheet': Timesheet},
                        function (returnedData) {
                            console.log(returnedData);
                            if (returnedData == 'Set') {
                                alert('Timesheet was rejected');
                                document.getElementById('accept').disabled = true;
                                document.getElementById('reject').disabled = true;
                            }
                            if (returnedData == 'Own timesheet') {
                                alert('You cannot reject your own timesheet!');
                            }

                        });

                }

            }
        }
    }
});

here

Answer 1

Bootbox实际上为prompt function提供了inputType选项，您可以在其中指定备用输入类型，如here所示：

bootbox.prompt({
    title: "This is a prompt with a textarea!",
    inputType: 'textarea',
    callback: function (result) {
        console.log(result);
    }
});

因此，您可以（稍微）简化代码：

bootbox.prompt({
    title: "Reasons for Rejection?",
    className: 'medium',

    // Change the input type
    inputType: 'textarea', 

    // You can't change the buttons, but you can tweak their style and label (content)
    buttons: { 
        cancel: {
            className: 'btn-warning'
        },
        confirm: {
            label: 'Save',
            className: 'btn-success'
        }
    },

    // Let Bootbox do the work of getting the textarea value
    callback: function (result) {

        // $.trim() isn't really necessary, but it 
        // prevents a user from simply hitting the spacebar and submitting
        if ($.trim(result) != '') {
            timesheet_arr = getTimesheet.split('\\s+');
            Timesheet = {
                timesheet_arr: timesheet_arr,
                status: approval_status,
                comments: result
            };
            Timesheet = JSON.stringify(Timesheet);
            $.post('http://localhost:8000/timer/approvetimesheet/', {'Timesheet': Timesheet},
                function (returnedData) {
                    if (returnedData == 'Set') {
                        alert('Timesheet was rejected');
                        document.getElementById('accept').disabled = true;
                        document.getElementById('reject').disabled = true;
                    }
                    if (returnedData == 'Own timesheet') {
                        alert('You cannot reject your own timesheet!');
                    }

                });

        }
    }
});

这个选项被排除在最新的文档更新之外（我的错），所以除非你真正查看源代码，否则它并不明显。

Answer 2

您可以使用以下代码：

第一种方法（使用内联CSS）：

event

或者

第二种方法（使用外部/内部CSS） 推荐：

<textarea style="width: 300px; height: 150px;" id="tarea"></textarea>

您可以设置textarea的宽度和高度。

在bootbox提示符下如何增加文本区域的大小

2 个答案:

或者