w2ui 1.5 tabIndex 不适用于 list 和 multi select
w2ui 1.5 tabIndex is not working for list and multi select
TabIndex 在 1.5 版中不适用于列表和多 select。下面是link转w2ui自带的表单demo。 http://w2ui.com/web/demos/#!forms/forms-2。如您所见,焦点从日期字段转移到 texarea,跳过列表和多个 select 字段。
有什么解决办法吗?
因为demo中提供的form.html没有在input元素中设置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>
TabIndex 在 1.5 版中不适用于列表和多 select。下面是link转w2ui自带的表单demo。 http://w2ui.com/web/demos/#!forms/forms-2。如您所见,焦点从日期字段转移到 texarea,跳过列表和多个 select 字段。
有什么解决办法吗?
因为demo中提供的form.html没有在input元素中设置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>