jqueryyii2maskedinputactive-form

YII2 MaskedInput: moving between fields does not highlight content


Usually when moving from a field to another with tab-key, the field content (if present) is highlighted and pressing a key the content of the field is deleted but that doesn't happen when using Kartik MaskedInput with decimal field.

When I move control to another field the cursor moves at the end, so I must use backspace to delete the field content or use mouse to highlight it.

I have a form with a lot of fields, so this is takes long time to edit.

This is my code:

<?= $form->field($model, 'val_one' , ['template' => '
                      <div class="input-group ">
                      <span class="input-group-addon">
                      FIRST
                      <span class="glyphicon glyphicon-euro"></span>
                      </span>
                      {input}                      
                      </div>
                      {error}{hint}'])->textInput(['maxlength' => true])->label(false)->widget(yii\widgets\MaskedInput::className(),
                                                [
                                               'clientOptions' => [
                                               'alias' => 'decimal',
                                               'groupSeparator' => '.',
                                               'radixPoint' => ',',
                                               'digits' => 2,
                                               'autoGroup' => true,
                                               'removeMaskOnSubmit' => true,
                                               'rightAlign' => false,                                  
                                               ],
                                               'options' => [
                                               'class' => 'form-control',                  
                                               ]                               
                                                 ]) ?>

Solution

  • I found the solution.

    It's enough to use this javascript code:

    $focus = <<< JS
    function getSelect(item) {
    if (event.keyCode == 9) {
    item.select ();
       };
    };
    JS;
    $this->registerJs($focus, View::POS_END);
    

    and add this line in form field options:

    'onkeyup' => 'getSelect($(this))'
    

    In this way, every time tab-key is pressed (code 9) the content of the destination field is selected