Yii2：Kartik\editable\Editable 模糊时关闭弹出窗口或在外部单击

Question

使用 EditableColumn 小部件以及文本框弹出窗口并单击字段并打开弹出窗口。当我在页面的任何区域之外单击时，弹出窗口不会关闭

  return kartik\editable\Editable::widget ( [
            'name' => 'name' ,
            'size' => 'sm' ,
            'placement' => 'right' ,
            'containerOptions' => [] ,
            'contentOptions' => [] ,
            'inputType' => kartik\editable\Editable::INPUT_TEXT ,
            'value' => 1 ,
            'editableValueOptions' => [] ,
            'pluginEvents' => [
                "editableSuccess" => "function(event, val, form, data) {
    $.pjax.reload({container: '#name'});
    }" ,
            ] ,
            'formOptions' => [
                'method' => 'post' ,
                'id' => 'form_name' ,
                'action' => [ url ]
            ] ,
            'options' => [
                'id' => 'form_name' ,
                'pluginOptions' => [
                    'autoclose' => true
                ] ,
                'maxlength' => '10' ,
            ] ,
            'submitButton' => [
                'class' => 'btn btn-sm btn-primary' ,
                'icon' => '' ,
            ] ,
        ] );

Answer 1

您需要为可编辑选项使用选项 'closeOnBlur'=>true,，因为它默认为 false，并且在点击外部任意位置时保持粘性。

此外，您在 options 中指定了 pluginOptions，这会将它们作为属性添加到输入中。并且您正在指定 URL，例如 [url]，请在使用代码时将其更新为实际的 URL，将您的可编辑代码更改为以下内容。

echo kartik\editable\Editable::widget ( [
    'name' => 'name' ,
    'size' => 'sm' ,
    'placement' => 'right' ,
    'containerOptions' => [] ,
    'contentOptions' => [] ,
    'inputType' => kartik\editable\Editable::INPUT_TEXT ,
    'value' => 1 ,
    'editableValueOptions' => [] ,
    'pluginEvents' => [
        "editableSuccess" => "function(event, val, form, data) {
    $.pjax.reload({container: '#name'});
    }" ,
    ] ,
    'formOptions' => [
        'method' => 'post' ,
        'id' => 'form_name' ,
        'action' => ''
    ] ,
    'closeOnBlur'=>true,
    'options' => [
        'id' => 'form_name' ,
        'maxlength' => '10' ,
    ] ,
    'submitButton' => [
        'class' => 'btn btn-sm btn-primary' ,
        'icon' => '' ,
    ] ,
] );

Yii2：Kartik\editable\Editable 模糊时关闭弹出窗口或在外部单击

Yii2: Kartik\editable\Editable close popover on blur or if clicked outside

php

yii2

kartik-v