Why is input not available due to tabindex="-1"?

Question

css

<a class="btn btn-primary btn-large" href="#testModal" data-toggle="modal">Запустить демонстрацию модального элемента</a>
    <div id="testModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <h3>Тест header</h3>
        </div>
        <div class="modal-body" style="clear: both;">
            <h3>Тест body</h3>
            <div>
<code lang="php">


                <?
                $APPLICATION->IncludeComponent('bitrix:main.calendar', '', Array(
                        'SHOW_INPUT' => 'Y',
                        'FORM_NAME' => '',
                        'INPUT_NAME' => 'date_from',
                        'INPUT_NAME_FINISH'=> 'date_to',
                        'INPUT_VALUE' => '',
                        'INPUT_VALUE_FINISH' => '',
                        'SHOW_TIME' => 'Y',
                        'HIDE_TIMEBAR' => 'N',
                        'INPUT_ADDITIONAL_ATTR' => 'placeholder="дд.мм.гггг чч:мм:сс"'
                    )
                );
                ?>
</code>
            </div>
        </div>
        <div class="modal-footer">
            <h3>Тест footer</h3>
        </div>
    </div>

If the tabindex="-1" attribute is removed from the modal window, then it will be possible to set the time in the calendar manually (it will be possible to click on the input), and if the tabindex="-1" attribute is left, then it will no longer be possible to click on the input.
Why is that? How does tabindex="-1" affect the input?
Modal window using bootstrap 2

Answer 1

Do you understand what a tabindex is and why it is needed? This attribute defines the sequence of transition between elements when the Tab button is pressed. Accordingly, with a value of -1, such an element will be ignored.
So why do you have it installed? So that the user cannot write anything himself in this input?
For this there are:
1). The disabled attribute blocks access and modification of the form field. In this case, it is displayed in gray and cannot be activated by the user. In addition, such a field cannot receive focus by pressing the Tab key, the mouse, or otherwise.
2). readonly attribute - When the readonly attribute is added to a tag, the text field cannot be modified by the user, including entering new text or modifying existing text.