Yii 2 kartik dialog.prompt 输入类型为 textarea

Question

我有一个按钮可以触发卡丁车 dialog.prompt，其中输入了文本。我需要对话框中的输入具有多行和换行功能（如 textarea）

如何将其从简单的文本输入更改为textarea？

这是我的 javascript:

$("#bulk-email-button-invitations").on("click", function() {
    var grid = $("#invitations");
    var keys = grid.yiiGridView('getSelectedRows');

    if (keys.length >= 1){
    krajeeDialog.prompt({label:'Text emailu:', placeholder:'Zadejte text emailu'}, function (result) {
        if (result) {
            $(location).attr('href', '/educational-event-invitation/bulk-email?' + $.param({invitations: keys, text: result}));
        } else {
            krajeeDialog.alert('Text emailu nesmí být prázdný!');
        }
    });
    }else{
        krajeeDialog.alert("Nejprve vyberte studenty, kterým chcete poslat email!")
   }
});

我发现如果未定义类型（与我的情况下的标签和占位符不同），它默认为 "text"。但是除了简单的单行文本输入之外，我无法使对话框呈现任何类型。

Answer 1

显然，扩展程序不支持此功能。

原因：

原因是在定义了 KrajeeDialog.prototype 的 dialog.js 中，函数 bdPrompt 负责处理要创建的提示对话框，它创建默认字段类型为 input 而不是决定传递给 KrajeeDialog.prompt() 的任何选项或参数，尽管您可以传递名称为 type 的参数，如

krajeeDialog.prompt({
  label:'Text emailu:', 
  placeholder:'Zadejte text emailu',
  type:'password'
},function(){})

但这并不决定元素是input还是textarea类型，此参数type作为输入元素的attribute传递。请参阅下面的代码块以了解我解释第三行将始终创建输入类型字段的原因。

文件`yii2-dialog/assets/js/dialog.js`第110行

if (typeof input === "object") {
    $inputDiv = $(document.createElement('div'));
    $input = $(document.createElement('input'));
    if (input['name'] === undefined) {
        $input.attr('name', 'krajee-dialog-prompt');
    }
    if (input['type'] === undefined) {
        $input.attr('type', 'text');
    }
    if (input['class'] === undefined) {
        $input.addClass('form-control');
    }
    $.each(input, function(key, val) {
        if (key !== 'label') {
            $input.attr(key, val);
        }
    });
    if (input.label !== undefined) {
        msg = '<label for="' + $input.attr('name') + '" class="control-label">' + input.label + '</label>';
    }
    $inputDiv.append($input);
    msg += $inputDiv.html();
    $input.remove();
    $inputDiv.remove();
} else {
    msg = input;
}

因此，如果您想以这种方式工作，您可能需要根据需要重写 javascript 函数。

Answer 2

毕竟可以将自定义 html 添加到 krajeeDialog.prompt。在文档中，kartik-v 指出：

content: string|object: If set as a string, it is treated as a raw HTML content that will be directly displayed.

因此，如果我用包含所需 html 的字符串替换代码中的原始对象，它将呈现我的文本区域或任何其他表单元素。

比如用textarea替换html:

$("#bulk-email-button-invitations").on("click", function() {
    var grid = $("#invitations");
    var keys = grid.yiiGridView('getSelectedRows');

    if (keys.length >= 1){
    krajeeDialog.prompt('<textarea>Sample text...</textarea>', function (result) {
        if (result) {
            $(location).attr('href', '/educational-event-invitation/bulk-email?' + $.param({invitations: keys, text: result}));
        } else {
            krajeeDialog.alert('Text emailu nesmí být prázdný!');
        }
    });
    }else{
        krajeeDialog.alert("Nejprve vyberte studenty, kterým chcete poslat email!")
   }
});

Yii 2 kartik dialog.prompt 输入类型为 textarea

Yii 2 kartik dialog.prompt with input type textarea

javascript

yii2

dialog

prompt

kartik-v

原因：

文件yii2-dialog/assets/js/dialog.js第110行

文件`yii2-dialog/assets/js/dialog.js`第110行