Question

我有一个问题，我正在尝试修改HTML不受我控制的表单的Tab键顺序，因此我需要使用JQuery修改代码，以便以我想要的方式制作表单选项卡。

这是我无法改变的HTML代码：

<div class="form1">
    <label>First Name</label>
    <input id="field1" class="field1" type="text" value="" name="Initials">
</div>

我认为这个JQuery：

$(document).ready(function() {
        $("#field1").attr("tabindex","1");
});

将生成：

<div class="form1">
   <label>First Name</label>
   <input id="field1" class="field1" tabindex="1" type="text" value="" name="Initials">
</div>

然而我却没有做任何事情。

我需要更多输入目标，所有输入都是随机ID :(

其他信息。

表单由（我已经改变了一些值，但希望它有意义）生成：

<script type="text/javascript" src="https://XXX.com/widget.js"></script>
<script type="text/javascript">
var widget_config = {
   widgetId: 'XX',
   campaignId: 'XX',
   clientId: 'XX',
   trackingId: 'website',
   baseUrl: 'https://XXX.com'
}

var display_config7 = {
   cssId: 1,
   'background-color': '#',
   'font-family': 'Times New Roman',
   'color': '#000000',
   'font-size': '12px',
   'width': 400,
   'height': 600
}

widget.init('#widget_XXX', widget_config_XXX, display_config_XXX);

</script>

将JQuery添加到页面中并不针对生成的代码，因此我尝试在脚本本身中添加它也无效：

<script type="text/javascript" src="https://XXX.com/widget.js"></script>
<script type="text/javascript">
var widget_config = {
   widgetId: 'XX',
   campaignId: 'XX',
   clientId: 'XX',
   trackingId: 'website',
   baseUrl: 'https://XXX.com'
}

var display_config7 = {
   cssId: 1,
   'background-color': '#',
   'font-family': 'Times New Roman',
   'color': '#000000',
   'font-size': '12px',
   'width': 400,
   'height': 600
}

widget.init('#widget_XXX', widget_config_XXX, display_config_XXX);

$("#field-Initials").attr("tabindex","1");
$("#field-Surname").attr("tabindex","2");

</script>

Answer 1

然而我却没有做任何事情。

不，它完全符合您的预期。它将tabindex="1"属性设置为id="field1"的元素。只是它直接进入DOM。如果查看页面的源代码，您将看到服务器发送的原始HTML。使用DOM检查工具（例如FireBug）查看修改。

就随机ID而言，那么它将取决于您希望应用tabindex的顺序。您可以选择所有输入字段，如$('input')，然后递增tabindex，但这样，索引将按照输入在DOM中显示的顺序设置，因此可能需要根据您的特定需求进行调整：< / p>

$(function() {
    $('input').attr('tabindex', function(index, attr) {
        return index + 1;
    });
});

将tabindex attr添加到特定输入

1 个答案: