Question

TabIndex在1.5版中不适用于列表和多选。以下是w2ui自己的表单演示的链接。 http://w2ui.com/web/demos/#!forms/forms-2。如您所见，从日期字段开始，重点转移到了德克萨斯州，同时跳过了列表字段和多选字段。

对此有什么解决办法吗？

Answer 1

因为演示中提供的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>

w2ui 1.5 tabIndex不适用于列表和多选

1 个答案: