Search code examples
tabindexw2ui

w2ui 1.5 tabIndex is not working for list and multi select

TabIndex is not working for list and multi select in version 1.5. Following is the link to w2ui's own form demo. http://w2ui.com/web/demos/#!forms/forms-2. As you can see, from date field the focus is shifting to texarea skipping both list and multi select fields.

Is there any solution to this?

Solution

  • Because form.html provided in demo did not set tabindex attribute in input element. You can solve this problem by add tabindex attribute to all input tag as below.

        <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>