w2ui 1.5 tabIndex не работает для списка и множественного выбора - PullRequest
Новая
       17

w2ui 1.5 tabIndex не работает для списка и множественного выбора

0 голосов
/ 11 ноября 2018

TabIndex не работает для списка и множественного выбора в версии 1.5. Ниже приведена ссылка на демонстрацию собственной формы w2ui. http://w2ui.com/web/demos/#!forms/forms-2. Как вы можете видеть, с поля даты фокус смещается на Техас, пропуская как поля списка, так и поля множественного выбора.

Есть ли какое-нибудь решение для этого?

1 Ответ

0 голосов
/ 20 ноября 2018

Поскольку файл form.html, представленный в демоверсии, не установил атрибут tabindex во входном элементе. Вы можете решить эту проблему, добавив атрибут tabindex ко всем тегам ввода, как показано ниже. 

    <html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></head><body><div class="w2ui-page page-0">
    <div class="w2ui-field">
        <label>Text:</label>
        <div>
            <input name="field_text" type="text" tabindex="10" maxlength="100" style="width: 350px">
        </div>
    </div>
    <div class="w2ui-field">
        <label>Text (alpha-numeric):</label>
        <div>
            <input name="field_alpha" type="text" tabindex="20" maxlength="100" style="width: 350px">
        </div>
    </div>
    <div class="w2ui-field">
        <label>Number (int):</label>
        <div>
            <input name="field_int" type="text" tabindex="30" maxlength="100" size="16">
        </div>
    </div>
    <div class="w2ui-field">
        <label>Number (float):</label>
        <div>
            <input name="field_float" type="text" tabindex="40" maxlength="100" size="16">
        </div>
    </div>
    <div class="w2ui-field">
        <label>Date:</label>
        <div>
            <input name="field_date" type="text" tabindex="50" maxlength="100" size="16">
        </div>
    </div>
    <div class="w2ui-field">
        <label>List:</label>
        <div>
            <input name="field_list" type="text" tabindex="60" style="width: 350px">
        </div>
    </div>
    <div class="w2ui-field">
        <label>Multi Select:</label>
        <div>
            <input name="field_enum" type="text" tabindex="70" style="width: 350px">
        </div>
    </div>
    <div class="w2ui-field">
        <label>Text Area:</label>
        <div>
            <textarea name="field_textarea"  tabindex="80" style="width:100%; height: 80px; resize: none"> </textarea>
        </div>
    </div>        
        <div class="w2ui-field">
        <label>Select:</label>
        <div>
            <select name="field_select" tabindex="90">
                <option></option>
                <option value="1">Item 1</option>
                <option value="2">Item 2</option>
                <option value="3">Item 3</option>
                <option value="4">Item 4</option>
                <option value="5">Item 5</option>
                <option value="6">Item 6</option>
            </select>
        </div>
    </div>
    <div class="w2ui-field">
        <label>Check:</label>
        <div>
            <label>
                <input name="field_check" tabindex="100" type="checkbox"/>
                Some field
            </label>
        </div>
    </div>
    <div class="w2ui-field">
        <label>Radio:</label>
        <div>
            <label tabindex="110">
                <input name="field_radio"  type="radio" value="1"/>
                Item 1
            </label>
            <br>
            <label tabindex="120">
                <input name="field_radio"  type="radio" value="2"/>
                Item 2
            </label>
            <br>
            <label tabindex="130">
                <input name="field_radio"  type="radio" value="3"/>
                Item 3
            </label>
        </div>
    </div>
</div>

<div class="w2ui-buttons">
    <button class="w2ui-btn" tabindex="140" name="reset">Reset</button>
    <button class="w2ui-btn" tabindex="150" name="save">Save</button>
</div>
</body></html>
...