当文本更改时，输入框自动更新接下来的 6 个文本框

Question

我有 7 个文本框。如果前 1 个文本框（所有年份的卷）文本发生更改，则需要在接下来的 6 个输入框中更新文本（最新 2009 年卷到最新 2014 年卷）。为此，我需要 javascript 或 Jquery。我将为顶部 1 的文本框编写 Js textchanged() 或 focuschange() 。那么我应该在 focuschage() 或 textchangedmethods() 中写什么

<tr id="row12_136" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Volume All Years</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_136" type="text" maxlength="255" id="12_136" tabindex="61" title="Volume All Years" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                    </td>
                </tr><tr id="row12_60" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Latest 2009 Volume*</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_60" type="text" maxlength="255" id="12_60" tabindex="62" title="Latest 2009 Volume" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                        <span controltovalidate="12_60" errormessage="* Required!" display="Dynamic" validationGroup="ValidateInsert" id="_ctl47" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">* Required!</span>
                    </td>
                </tr><tr id="row12_61" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Latest 2010 Volume*</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_61" type="text" maxlength="255" id="12_61" tabindex="63" title="Latest 2010 Volume" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                        <span controltovalidate="12_61" errormessage="* Required!" display="Dynamic" validationGroup="ValidateInsert" id="_ctl48" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">* Required!</span>
                    </td>
                </tr><tr id="row12_62" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Latest 2011 Volume*</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_62" type="text" maxlength="255" id="12_62" tabindex="64" title="Latest 2011 Volume" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                        <span controltovalidate="12_62" errormessage="* Required!" display="Dynamic" validationGroup="ValidateInsert" id="_ctl49" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">* Required!</span>
                    </td>
                </tr><tr id="row12_63" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Latest 2012 Volume*</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_63" type="text" maxlength="255" id="12_63" tabindex="65" title="Latest 2012 Volume" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                        <span controltovalidate="12_63" errormessage="* Required!" display="Dynamic" validationGroup="ValidateInsert" id="_ctl50" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">* Required!</span>
                    </td>
                </tr><tr id="row12_64" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Latest 2013 Volume*</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_64" type="text" maxlength="255" id="12_64" tabindex="66" title="Latest 2013 Volume" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                        <span controltovalidate="12_64" errormessage="* Required!" display="Dynamic" validationGroup="ValidateInsert" id="_ctl51" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">* Required!</span>
                    </td>
                </tr><tr id="row12_65" class="RegText">
                    <td style="width:420px;Padding-right:20px;">Latest 2014 Volume*</td>
                    <td style="width:420px;Padding-left:0px;">
                        <input name="12_65" type="text" maxlength="255" id="12_65" tabindex="67" title="Latest 2014 Volume" class="textbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
                        <span controltovalidate="12_65" errormessage="* Required!" display="Dynamic" validationGroup="ValidateInsert" id="_ctl52" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;display:none;">* Required!</span>
                    </td>

Answer 1

使用该 html，其中 #foo 是相应表上的归零选择器：

$('tr.RegText input:eq(0)').change(function() {
  $('tr.RegText input:gt(0):lt(7)').val($(this).val());
});

这假设第一个输入字段的模糊更改是可以接受的。更改为 keyup 或其他任何口味。

Answer 2

使用 jQuery：

$("#12_136").keyup(function(){
  var $myVal = $("#12_136").val();
  for(var i = 0; i < 6; i ++) {
    $("#12_6"+i).val($myVal);
  }
});

Answer 3

将内联按键事件放入 HTML 中。您可以在运行时轻松附加事件处理程序。

有了 jQuery，你就可以做到这一点。我正在使用“onchange”。我认为您不需要在按键级别执行此操作。

$(document).ready(function() { init() })


function init() {     
     $('#12_136').change(function() {
          var myVal = $(this).attr('value')
          $(this).parents('table').find('input').attr('value',"#" + myVal + "#" )
     })
}